Google Maps Api – Infofenster mit Tabs

Eines der größten Probleme bei Google Maps ist es stets, eventuell vorhandene Informationen in den Infofenstern zu verpacken. Hierbei gibt es zwei grundlegende Probleme: a) akuter Platzmangel und b) die Gestaltung. Lustigerweise stellt Google hier einen Mechanismus zur Verfügung, um zumindest die Daten zu strukturieren. Es benutzt ihn nur kaum einer ;)

Mittels eines openInfoWindowTabsHtml anstatt eines openInfoWindowHtml kann man eine beliebige Anzahl von GInfoWindowTab in tabellarischer Form darstellen:

Demo eines Infofensters mit Tab
Demo eines Infofensters mit Tab

Ein solches GInfoWindowTab besteht primär aus zwei Informationen, dem Titel des Tabs, und dem Inhalt des Tabs. Entsprechend bauen wir erstmal ein Array auf, das diese Informationen bereitstellt:

var tabname = new Array(3);
var tabcontent = new Array(3);
tabname[0] = 'Information';
tabcontent[0] = 'Content zu Information'; 
tabname[1] = 'Bilder';
tabcontent[1] = 'Content zu Bildern'; 
tabname[2] = 'Adresse';
tabcontent[2] = 'Die Adresse';

Aus diesen Informationen müssen wir nun die GInfoWindowTab zusammenstellen:

var mytabs = new Array();
mytabs[0] = new GInfoWindowTab(tabname[0],tabcontent[0]);
mytabs[1] = new GInfoWindowTab(tabname[1],tabcontent[1]);
mytabs[2] = new GInfoWindowTab(tabname[2],tabcontent[2]);

Sind diese zusammengestellt kann man ganz einfach ein Fenster mit Tabs einem Marker hinzufügen:

marker.openInfoWindowTabsHtml([mytabs[0], mytabs[1], mytabs[2]]);

Das fertige Beispiel kann sich wie immer auf Archeol angeschaut werden.

Ähnliche Beiträge

Design-Update zum Zweiten Frei nach dem Motto: Nicht schön, aber einzigartig, habe ich heute noch was am Design geschraubt. Mir ging es vor allem darum, das die Navigationselem...
Google Maps zieht die Bremse Nunja, schaut man sich mal um wer wo weshalb Google Maps einsetzt, kommt man schnell zu dem Ergebnis, dass es so ziemlich jeder tut. Die Einbindung is...
Google Maps mit individuellem MapType Wie versprochen fange ich jetzt an, die Steuerelemente von Google Maps zu individualisieren. Den Anfang macht hier der MapType, weil am einfachsten :)...
Google Maps Tutorial – Steuerelemente Bisher haben wir uns nicht um die Steuerelemente gekümmert, sondern einfach den Default übernommen. Für den Anfang hat das gereicht, aber insbesondere...

7 Antworten auf „Google Maps Api – Infofenster mit Tabs“

  1. Zitat Ingo :

    Das mit dem HTML-Code müsste schon funktionieren, tut es zumindest bei mir problemlos. Allerdings musst Du mit den einfachen Anführungszeichen aufpassen. Die entweder durch “ ersetzen, oder mit \‘ maskieren, sonst zerschießt Du Dir wirklich die Funktion.

    Danke für die Nachricht, ich weiß jetzt warum es nicht geht, wegen XHTML…
    habe ich gestern gelöst, vielen Dank trotzdem

  2. Das mit dem HTML-Code müsste schon funktionieren, tut es zumindest bei mir problemlos. Allerdings musst Du mit den einfachen Anführungszeichen aufpassen. Die entweder durch “ ersetzen, oder mit ‚ maskieren, sonst zerschießt Du Dir wirklich die Funktion.

  3. @felix Du hast natürlich recht, das wäre Programmiertechnisch der wesentlich schönere Weg, aber ich fand es so ein wenig intuitiver, damit auch jeder mitbekommt was da eigentlich passiert :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.