(Web-) Mapping

Google-Maps: Marker und Fenster

Es wird Zeit, daß ich mein kleines Tutorial über die Google Maps API fortsetze, schließlich hat schon jemand in meinen Kommentaren danach gefragt: Wie kommen die »Bömmel« in die Karte?

Gesponserter Link

Viele Web Dienstleister greifen auf das Google Map API zu, so auch Store Locator, wo man Öffnungszeiten und die Standorte von Händlern und Geschäften findet.

Die »Bömmel« heißen im Google-Jargon »Marker« und das Einbinden ist eigentlich ganz einfach. Wir wollen aber auch noch zeigen, wie man es anstellt, daß sich beim Klick auf einen der Marker ein Fenster öffnet und wir werden außerdem zeigen, daß sich so ziemlich jeder Multimedia-Inhalt — sofern er im Netz verfügbar ist — in diesen Fenstern darstellen läßt:

Einen Marker bindet man mit folgenden drei Zeilen Code in eine Google Maps ein:

var point1 = new GPoint(13.43907737074769,
 52.4905041220139);
var beck = new GMarker(point1);
map.addOverlay(beck);

Diese drei Zeilen werden einfach an das Ende des JavaScripts des zweiten Tutorials angehängt, außerdem habe ich den Mittelpunkt der Karte in das Zentrum des Görlitzer Parks gelegt (die Koordinaten habe ich mir händisch aus Google Earth besorgt):

map.setCenter(new GLatLng(52.4965283851647,
 13.4378287541526), 13, G_HYBRID_MAP);

Um dann aber auch noch ein Info-Window aufgehen zu lassen, müssen wir noch einen Eventlistener hinzufügen (GEvent.addListener()), der den Klick auf den Marker abfängt und diesen an die Funktion openInfoWindowHtml() binden. Der Code für den ersten Marker (der unterste in der Karte) sieht dann also so aus:

var point1 = new GPoint(13.43907737074769,
 52.4905041220139);
var html1 = "<h5>Drei-Bezirks-Eck</h5>
<p>Hier stoßen Kreuzberg, Treptow und
 Neuk&ouml;lln zusammen.</p>"
var beck = new GMarker(point1);
GEvent.addListener(beck, "click", function()
 {beck.openInfoWindowHtml(html1)});
map.addOverlay(beck);

Wie wir sehen, beherrscht das Info-Fenster HTML. Sogar die Stylesheets der Seite werden mit angewandt, bei mir hat ein <h5> eine ockerfarbige Unterstreichung und die wird auch in dem Info-Fenster angezeigt:

Und OK, mein wunderbares Webwerkzeug setzt die Umlaute auch in Scripten automatisch in Entities um, wenn Ihr also in den folgenden Code-Beispielen Umlaute seht, denkt daran, daß Ihr sie unter Umständen noch in HTML-Entities umwandeln müßt. Und außerdem habe ich den Code zwecks Lesbarkeit an einigen Stellen wüst umgebrochen, im Zweifelsfalle schaut daher einfach in den Quellcode dieser Webseite.

Und wenn so ein Fenster — wie der Name schon sagt — ein HTML-Fenster ist, dann müßten doch auch Bilder gehen, oder? Auch wenn sie zum Beispiel direkt aus flickr importiert werden:

var point2 = new GPoint(13.4507877505395,
 52.49732892528733);
var html2 = "<h5>Der Freischwimmer</h5><p>
 <a href='http://www.flickr.com/photos/schockwellenreiter/
280108093/' title='Klickr Flickr'><img
 src='http://farm1.static.flickr.com/
 105/280108093_44ceefe246_t.jpg'
 width='100' height='75' border='0' align='left'
 hspace='8' vspace='4'
  alt='Der »Freischwimmer« am Lohmühlengraben' />
 </a> Kreuzbergs beliebter<br /> schwimmender Biergarten
 <br />direkt am Lohmühlengraben.</p>"
var freischwimmer = new GMarker(point2);
GEvent.addListener(freischwimmer, "click", function()
 {freischwimmer.openInfoWindowHtml(html2)});
map.addOverlay(freischwimmer);

Das einzige, was sich gegenüber dem ersten Marker geändert hat, ist der ellenlange HTML-Code für das Einbinden des Photos, hierbei ist zu beachten, daß die Attribute entweder nur durch einfache Hochkommata geklammert sind oder daß die doppelten Hochkommata ausmaskiert werden. Dann funktioniert es:

Der HTML-Code für das Fenster enthält ein paar Linebreaks, da sich die Browser bezüglich des Umbruchs irgendwie unterschiedlich verhalten. Alternativ könnte man vermutlich auch ein Stylesheet mit Breite und Höhe einsetzen, das habe ich aber (noch) nicht ausprobiert.

Und auch der Backlink hinter dem Bild zu flickr funktioniert. Probiert es aus...

Und jetzt werden wir ganz mutig und probieren es auch mit einem Filmchen. Sevenload bietet von Hause aus an, Filme in unterschiedlichen Größen einzubinden, also holen wir uns den HTML-Code für eine 200 Pixel breite Fassung von dort und binden ihn in unsere Seite ein:

var point3 = new GPoint(13.44458286586912,
 52.50095929814412);
var html3 = "<h5>An der Oberbaumbrücke</h5>
 <p><object width='200' height='178'><param name='movie' 
 value='http://de.sevenload.com/pl/sj3b0xi/200x178/swf' />
 <embed src='http://de.sevenload.com/pl/sj3b0xi/200x178/swf'
 type='application/x-shockwave-flash'
 width='200' height='178'></embed></object></p>
 <p>Die U-Bahn fährt hier als Hochbahn.</p>"
var oberbaum = new GMarker(point3);
GEvent.addListener(oberbaum, "click", function()
 {oberbaum.openInfoWindowHtml(html3)});
map.addOverlay(oberbaum);

Und siehe da, es funktioniert:

Unschön ist allerdings, daß Google Maps das Fenster, da es zu groß ist, oberhalb seiner eigenen Umgebung aufbaut und erst dann die Lage der Karte korrigiert. Der Safari erneuert die darunterliegenden Teile nicht (der Firefox wohl), daher gibt es dort weiße Flecken, wo eigentlich Text stehen müßte. Aber wenn man den Text dann einmal mit der Maus markiert hat, ist er auch wieder da...

Ich hoffe, ich habe Euch mit diesem kleinen Tutorial zu neuen Experimenten angeregt...

Technorati-Tags: Google GoogleMaps Tutorial

Posted by Jörg Kantel | Permalink | | | Mapping