Programmierung Thomas Weise

twGmap - Infofenster

Google Maps mit eigenem Infofenster

von Thomas Weise ( Blog)

Beim Klick auf einen Marker einer jeden Google Map erscheint immer ein von Google generiertes Infofenster mit dem von Ihnen eingefügten Inhalt. Bauen Sie doch einfach Ihr eigenes Infofenster!

(Live-Demo)

In einem unserer vorangegangenen Artikel wurde schon 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 Infofenster wie beispielsweise folgende:

Screenshot
Google Map mit selbst erzeugten Info-Fenstern

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Designvorlage

Als Erstes erstellen wir uns ein Bild (oder gleich mehrere), das dann unser Infofenster 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 Programmversionen etwas variieren).

Screenshot
Sprechblase mit einem Bildbearbeitungsprogramm erstellen

Natürlich kann man auch sonstwelche 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.

Screenshot Screenshot

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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 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' (an der wir gleich noch ein paar Änderungen vornehmen müssen).

  <script type="text/javascript" src="twGmap.js"></script>
  <script type="text/javascript" src="twGmapInfofenster.js"></script>

Kommen wir nun zu den soeben angekündigten 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 erzeugt durch den Aufruf von 'new EBubble()'. 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 lnke 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 auch öffnen soll beim Klick auf die Marker. 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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Bei Fragen, Anregungen oder dergleichen schreiben Sie doch einen Kommentar in mein Blog