Google Maps mit eigenem Infofenster

Kein Beitragsbild

Thomas Weise

Thomas Weise ist gelernter Anwendungsentwickler. Ihn zog es aber immer schon in...

Zum vierten Mal basteln mit Google-Maps. Beim Klick auf einen Marker einer jeden Google Map erscheint stets ein von Google generiertes Infofenster mit dem von Ihnen eingefügten Inhalt. Das geht schicker. Bauen Sie doch einfach Ihr eigenes Infofenster.

Live-Demo

In einem unserer vorangegangenen Artikel Google Maps API benutzen wurde bereits beschrieben, wie eine Google Map mit einem ganz einfachem Info-Fenster erstellt werden kann. Dabei verwendeten wir google-eigene Funktionen zur Erstellung von Info-Fenstern. Dies ist auch nach wie vor die einfachste, schnellste und sicherste Methode überhaupt, um Info-Fenster zu erstellen.

Leider sind uns bei dieser Art der Erstellung einige (kleine) Grenzen gesetzt. Wer also alles selbst in der Hand haben will, der lese jetzt einfach weiter. Wir erstellen eigene Info-Fenster wie beispielsweise folgende:


Google Map mit selbst erzeugten Info-Fenstern

Design-Vorlage

Als Erstes erstellen wir uns ein Bild (oder gleich mehrere), das dann unser Info-Fenster darstellt, hier in Form einer Sprechblase. Dies kann man recht leicht mit verschiedenen Bildbearbeitungsprogrammen bewerkstelligen. Wer beispielsweise Photoshop benutzt, findet einige vorgefertigte Sprechblasen unter Eigene-Form-Werkzeug. Falls dort noch keine angezeigt werden, muss man erst bei Form das kleine Dreieck anklicken und Sprechblasen anfügen auswählen (das kann zwischen verschiedenen Programm-Versionen etwas variieren).


Sprechblase mit einem Bildbearbeitungsprogramm erstellen

Natürlich kann man auch irgendwelche Bilder benutzen, wenn sie nur irgendwie eine Fensterform darstellen. Da es in diesem Artikel nicht um designerische Schönheiten geht, sondern vielmehr um die technische Realisierung eigener Info-Fenster, sollen hier diese zwei Vorlagen genügen.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht


Javascript

Um eigene Info-Fenster mit Javascript zu realisieren, erstellen wir eine Klasse, von der dann die verschiedensten Info-Fenster abgeleitet werden können. Man kann natürlich auch das Rad neu erfinden…, wir verwenden hier jedoch eine vorgefertigte Klasse. Sie steht unter der Creative Commons Licence und kann daher frei verwendet werden. Diese Klasse wurde von Mike Williams erstellt und von Thomas Weise in seinem Google Map Tutorial ins Deutsche übersetzt und angepasst.

twGmapInfofenster.js

Wir binden diese Klasse wieder in ‘altbekannter Manier’ in den head-Bereich der html-Datei ein. Genauso wie unsere schon aus den vorangegangenen Übungen bekannte ‘twGmap.js’.

Kommen wir nun zu den Anpassungen in der Javascript-Datei ‘twGmap.js’.

function setTwMarkers(map) {
  var marker01 = machTwMarker01();
  var marker02 = machTwMarker02();
  map.addOverlay(marker01);
  map.addOverlay(marker02);

  // (map, bild, bildgröße, Größe innere Area im Bild, links-oben innere Area, ankerpunkt-marker, [true-nicht wegklickbar])
  twGmapInfofenster01 = new EBubble(map, "infofenster01.png", new GSize(400,400), new GSize(340,270), new GPoint(30,30), new GPoint(120,356));
  twGmapInfofenster02 = new EBubble(map, "infofenster02.png", new GSize(297, 243), new GSize(224, 126), new GPoint(36, 28), new GPoint(175,238));  

  return map;
}

Sie kennen aus den vorangegangenen Artikeln noch die Funktion ‘setTwMarkers()’, in dieser wurden die verschiedenen Marker (durch Aufruf interner Funktionen) erstellt und der Google Map bekannt gemacht. Genau hier erstellen wir nun unser neues Info-Fenster (besser gesagt: unsere zwei neuen Info-Fenster), in den Zeilen, die mit ‘twGmapInfofenster…’ beginnen.

In diesen Zeilen wird jeweils ein Info-Fenster durch den Aufruf von ‘new EBubble()’ erzeugt. Dabei werden folgende Argumente mit übergeben:

  1. ‘map’ – unsere Google Map
  2. ‘infofenster01.png’ – die URL für das Hintergrundbild (also für unsere am Anfang erstellte Sprechblase)
  3. ‘new GSize(400,400)’ – die Größe dieses Hintergrundbildes (Breite, Höhe)
  4. ‘new GSize(340,270)’ – Größe der inneren Area, für den Fensterinhalt (praktisch in etwa der verfügbare Platz ohne die Rundungen)
  5. ‘new GPoint(30,30)’ – die linke obere Ecke dieser inneren Area
  6. ‘new GPoint(120,356)’ – Ankerpunkt (die Spitze die auf den Marker zeigt)
  7. Zusätzlich kann man noch ‘true’ als letztes Argument übergeben. Das bedeutet, dass dieses Info-Fenster nicht bei einem Klick auf sich selbst geschlossen wird. Diese Angabe ist jedoch optional.

So, unsere Info-Fenster sind schonmal erzeugt. Aber sie sind erstens noch leer und zweitens weiß unsere Google Map (beziehungsweise die Marker) noch gar nicht, dass sie eben diese neuen Info-Fenster beim Klick auf die Marker auch öffnen soll. Dies erledigen wir in den einzelnen Marker-Erstellungs-Funktionen wie beispielsweise ‘machTwMarker01()’.

function machTwMarker01() {
  var point = new GPoint(13.748, 51.041);
  var marker = new GMarker(point);
  var html = '';
  html += '<div class="twGmapInfo">';
  html += ' <p class="headline">Das ist das Info-Fenster von Marker 01</p>';
  html += ' <p class="text">Dieses Info-Fenster ist nicht das Standard-Info-Fenster von Google sondern wurde mit Javascript selbst erstellt.</p>';
  html += '</div>';

  // hier das eigene Infofenster öffnen (anstatt das 'normale' von google)
  GEvent.addListener(marker, "click", function() {twGmapInfofenster01.openOnMarker(marker, html);});

  return marker;
}

Die Zeilen mit ‘html…’ machen nur den Inhalt des Info-Fensters. Die Zeile mit ‘GEvent…’ sorgt nun endlich dafür, dass bei einem Klick auf diesen Marker unser neues Info-Fenster angezeigt wird.

Das war es schon mit dieser Art eigenes Info-Fenster. Es gibt natürlich noch viele andere Wege oder Herangehensweisen. ™

Live-Demo und Quelltexte

Thomas Weise

Thomas Weise ist gelernter Anwendungsentwickler. Ihn zog es aber immer schon in Richtung Internet und Webentwicklung.
Seine Artikel auf drweb sind Gastartikel, selbst bloggt er auf

Hinterlasse einen Kommentar

13 Kommentare auf "Google Maps mit eigenem Infofenster"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Amatullah
Gast

Hallo zusammen!

Ich bin auf dieses Tutorial gestoßen und war erst erfreut. Dann musste ich feststellen, dass das Ganze in JavaScript umgesetzt wurde. Ich entwickele zurzeit jedoch in Java mit dem GWT Framework. Daher die Frage: Kennt irgendeiner eine Anleitung, die dieses Problem in Java löst?

Besten Dank im Voraus!

Adrian
Gast

bei chrome gibts probleme die transparenten Ränder werden nicht angezeigt

thomas57
Gast

Hallo erstmal aus dem Norden,
für WordPress gibt es ein Plugin, genannt geotag von Boris Pulyer. Dsa ist eigentlich ein ganz geniales Teil.
Nur mit den beschriebenen Infofenstern habe ich Probleme.
Vielleicht kennt es jemand oder setzt es auch ein. Dann könnte er mir einen Rat geben, gerne auch über meine Seite und das Formular.
Vielen Dank schon einmal und ein schönes Rest wochenende.

Christian
Gast

Hallo, ist es dort möglich auch ein markericon zu setzen ?

tisens
Gast

Die zwei dargestellten Infofenster sind nicht gerade der Hit in Sachen Design, aber dennoch finde ich den Artikel gut, kann man ja selber was schöneres basteln.

Martin
Gast

Also muss sagen super sache, was nich alles geht …

bei mir Funzts auch im Opera Browser wenn man den Alternativ link nimmt

mfg

killerbees19
Gast

Tatsache, der andere Link funktioniert perfekt. Super Sache, danke für die ausführliche Erklärung Thomas 🙂

MfG Christian

Thomas Weise
Gast

Jaja, die Sache mit dem Geschmack, der Optik 😀 , da halt ich mich raus…
Ich hab mal einen Ersatzlink in den Artikel reingemacht, der auf die zu funktionieren scheinende Live-Demo zeigt.

plexynote
Gast

Yep – hier funktioniert das Script – auf dem Mac im Safari, FF und sogar im Opera (9.61 unter Leopard)
Lag also anscheinend an der Einbindung hier im Blog…

Die Optik sieht leider immer noch grauenhaft aus… 😉

Thomas Weise
Gast

Das genau gleiche Skript liegt auch auf (http://)progtw.de/website/twGmap. Dort klappt es zumindest im Opera FF IE und Safari unter Windows. Ich weiß nicht warum das hier nicht funktioniert, ob es an WordPress liegt. Könnt Ihr bitte mal dort testen, ob es dort auch im Safari nicht klappt?

@plexynote: Jo stimmt, schön is was anderes. Ich sag mal so, es soll anregen zum Selbermachen 😉

plexynote
Gast

Erstens: Schön ist anders. Die Bubbles sehen grauenhaft aus.
Zweitens: auf dem Mac funktioniert die ganze Soße weder im Safari, Opera noch im FF.
Selbst der IE5-7 und FF unter Parallels (emulierte Windows-Umgebung) schmeißt nur Grütze raus.
Völlig untauglich für den ernsthaften Einsatz, finde ich.

Need_you
Gast

Ich finde es sehr gut das ihr dies hier erklärt, jedoch würde ich mich sehr über ein Update dieses Artikel freuen, wo wie mein Vorredner schon sagte, dies auch im Opera-Browser zu bewundern ist.

killerbees19
Gast

Leider funktioniert dieses Beispiel im Opera nicht wie gewünscht. Denn im Opera sehe ich zwar den Inhalt des Fensters, aber nichts von der schönen grafischen Umrandung. Beim original Google Maps InfoPopUp gibt es allerdings keine Probleme.

MfG Christian