Themen
Tutorials
Tools
Google Maps
Die Einbindung einer Google Maps-API (Application Programming Interface) in die eigene Webseite ist ein schöner Effekt, welcher sich relativ leicht realisieren lässt.
Beispiel
Eine Google Maps-Karte soll drei Pins mit je einer Beschreibung und einem Bild enthalten...
Die Sache ist eigentlich nicht so sehr kompliziert, lesen Sie dazu das folgende Tutorial.
Anleitung zur Einbindung einer Google Maps-Karte
Wir benötigen zuerst einen Key, dieser lässt sich über Google kostenlos besorgen. Pro URL ist nur ein Key zulässig. Nachdem der Schlüssel generiert wurde landen Sie auf einer Seite mit vier generierten Zeichenketten, sie verwenden davon die erste.
Jetzt bauen wir unser HTML-Formular, welches so beginnt..
In Zeile 9 der ersten Grafik wird am Ende anstatt dem Wort KEY der Schlüssel, den Sie von Google erhalten haben, eingetragen. Als nächstes erstellen wir die Javascript-Funktion load() (Zeile 11 in der zweiten Grafik). Diese wird in einem CDATA-Block eingeschlossen. Der Grund dafür ist, dass hier die XML-Technologie verwendet wird, die ein Problem mit dem Lesen von Zeichen wie < oder > hat, CDATA ermöglicht uns die richtige Übersetzung.
Die Funktion load() greift auf die ID map zu (Zeile 13), diese wird zum späteren Zeitpunkt aufgerufen. In Zeile 14 werden die Geodaten (Breite, Länge) eingetragen, diese können Sie sich z.B. über www.mapcoordinates.net besorgen. Die Zoomstufe kann in Zeile 15 eingestellt werden, möglich ist hier ein Wert zwischen 1 und 18.
Als nächstes wollen wir einen Pin setzen, welcher mit Inhalt, also einer Beschreibung und einem Foto, versehen werden soll. Wir befinden uns noch immer in der load()-Funktion und erstellen eine Variable mark1pos, welche die Geodaten, auf die der Pin zeigen soll, enthält. In Zeile 22 lässt sich ein kurzer Beschreibungstext hinzufügen, in Zeile 23 ein Foto, hier müssen dann der richtige Pfad und der Name des Fotos noch angepasst werden. Die restlichen Funktionen können so übernommen werden.
Für jeden weiteren Pin ändern sich nur jeweils die Variablennamen, die Geodaten und die Angaben im DIV-Container, wie Sie sich aus den Grafiken entnehmen lässt.
Nachdem nun eifrig der halbe Auschnitt der Karte zugepinnt wurde können die Funktion load() in Zeile 47 und der CDATA-Block (Zeile 48) geschlossen werden. Als nächstes brauchen wir ein paar CSS-Styles, die normalerweise extern aus einer separaten CSS-Datei eingebunden werden. Damit lassen sich die Abstände und Fenstergrößen einstellen.
Im letzten Schritt laden wir im <body> - Element die Funktion load() und rufen das DIV-Element map auf.