Donnerstag, 9. September 2010

Auf Twitter folgen.Twitter     Abonniere den Webworking RSS FeedRSS Feed

Browse > Startseite / Google Maps / Geocoding / Google Maps Api – Infofenster mit Tabs

Google Maps Api – Infofenster mit Tabs

11. September 2009

WP Greet Box icon
Hallo! Um regelmäßig über Neuigkeiten auf dieser Seite informiert zu werden, kannst du den RSS-Feed abonnieren. Mehr Informationen über diese Technik gibt es hier.

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:

1
2
3
4
5
6
7
8

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:

1
2
3
4

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:

1

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

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

Ähnliche Beiträge:

    Keine gefunden


7 Antworten auf “Google Maps Api – Infofenster mit Tabs”
Felix →
11. September 2009 um 15:18 Uhr

Mal ne Frage: warum benutzt du statt:
marker.openInfoWindowTabsHtml([mytabs[0], mytabs[1], mytabs[2]]);
nicht einfach:
marker.openInfoWindowTabsHtml(mytabs);
?

Diesen Beitrag zitieren

Guido →
11. September 2009 um 19:37 Uhr

@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 :)

Diesen Beitrag zitieren

Ingo →
11. Februar 2010 um 15:13 Uhr

Klasse Funktion, genau so was habe ich gesucht. Und nach Stunden der Google-Doku und suchen im Netz habe ich es endlich hier gefunden. Danke!

Diesen Beitrag zitieren

Ingo →
25. Februar 2010 um 10:49 Uhr

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.

Diesen Beitrag zitieren

Ingo →
25. Februar 2010 um 10:50 Uhr

“oder mit ‘ maskieren”
Da hat das System ein Zeichen gelöscht. Vor das ‘ muss ein Back-Slash zum maskieren.

Diesen Beitrag zitieren

Ayse →
25. Februar 2010 um 10:50 Uhr

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

Diesen Beitrag zitieren

Was ist deine Meinung zu diesem Beitrag?