Wegweiser: Google Maps API
Oftmals benötigt man eine passende Karte auf der Webpage. Dafür eignet sich die Google Maps API mit ihrer Vielzahl an individuellen Konfigurations- und Gestaltungsmöglichkeiten.
- Wegweiser: Google Maps API
- Geocoding
- Bedienelemente unter Kontrolle
Ob als Anfahrtsskizze, als Reiseroute, zum Darstellen eines Firmenfilialnetzes oder des Herkunftsorts eines Produktes - Google Maps werden oft eingesetzt. Diese Karten können Sie über die Google Maps API über Javascript in Ihre Website einbauen und anpassen. Bevor wir uns der API ausführlich wid...
Ob als Anfahrtsskizze, als Reiseroute, zum Darstellen eines Firmenfilialnetzes oder des Herkunftsorts eines Produktes - Google Maps werden oft eingesetzt. Diese Karten können Sie über die Google Maps API über Javascript in Ihre Website einbauen und anpassen. Bevor wir uns der API ausführlich widmen, erfahren Sie, wie Sie einfache Karten direkt über die Benutzer-oberfläche von Google Maps erstellen.
Die einfachste Variante
Diese schnelle Möglichkeit zur Einbindung einer Karte geht ganz ohne Javascript-Programmierung: Sie gehen zu Google Maps (maps.google.de ), geben die gewünschte Adresse ein und klicken auf Maps-Suche.In der Karte finden Sie rechts oben den Button Link. Bei Klick darauf erhalten Sie einen Link zur angegebenen Karte, über den Sie auf die Karte verlinken können. Darunter steht der HTML-Code zum Einbetten in eine Website. Dieser erzeugt einen Iframe, der sich in die Webseite integrieren lässt.Übrigens: Falls an dieser Stelle der Hinweis erscheint Diese Karte kann nicht eingebettet werden, so kann das daran liegen, dass zusätzliche Informationen angezeigt werden. Diese müssen Sie dann unter dem Punkt Mehr ausblenden. Über den Button Eingebettete Karte anpassen und Vorschau anpassen lässt sich die Größe der Karte verändern.
Der Schlüssel zur API
Die volle Freiheit haben Sie hingegen, wenn Sie die Google Maps API nutzen, die Programmierschnittstelle von Google Maps selbst. Dafür brauchen Sie den Google Maps API Key, einen individuellen Schlüssel, den Sie beim Aufruf der Javascript-Bibliothek mitsenden müssen. Um diesen zu beantragen, benötigen Sie ein Google-Konto. Dann können Sie sich den Schlüssel unter https://code.google.com/apis/maps/signup.html erzeugen lassen.Die Nutzungsbedingungen besagen, dass Sie die Karten genauso auf kommerziellen wie privaten Webseiten kostenlos nutzen können. Wichtig ist, dass die Anwendung für Endanwender frei zugänglich ist. Prinzipiell ist die Anzahl der Page Views der Website mit den Google Maps nicht beschränkt.Was allerdings beschränkt ist, ist die Anzahl der Geocoding-Anfragen - das sind Anfragen, über die eine Adresse in geografische Koordinaten (Längen- und Breitengrad) verwandelt wird. Derzeit bindet Google keine Werbung auf Karten ein, behält sich diese Option allerdings vor.Wenn Sie die Nutzungsbedingungen gelesen haben, geben Sie die Domain an, für die Sie den Schlüssel benötigen, und wählen API-Schlüssel generieren. Es erscheint ein Dokument mit Ihrem API-Schlüssel und Beispielcode. Den API-Schlüssel sollten Sie abspeichern.
Einfache Karte
Sehen wir uns an, wie man eine Karte erstellt. Sie beginnen Ihr Dokument wie gewohnt mit der Dokumenttypangabe. Für die Maps API wird XHTML als Typ empfohlen:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd"><html xmlns="https://www.w3.org/1999/
xhtml"><head>Dann geben Sie den Zeichensatz an, hier ist UTF-8 der empfohlene:
<meta http-equiv="content-type"
content="text/html; charset=utf-8"/>Im Beispiel soll ein Element mit der id="map" die Karte aufnehmen. Diesem sollten Sie per CSS die gewünschten Ausmaße zuweisen:
<title>Google Maps Javascript API
Example</title><style type="text/css">
#karte {
height: 300px;
width: 500px;
}</style>Nun beginnt der Javascript-Teil. Zuerst laden Sie die Javascript-Bibliothek:
<script src="https://maps.google.com/
maps?file=api&v=2&key=IHRKEY&sensor=false"
type="text/Javascript"></script>Die URL lautet maps.google.com/maps und nach einem Fragezeichen werden weitere Übergabeparameter spezifiziert. Die einzelnen Parameter werden durch ein &-Zeichen getrennt aneinandergehängt. Das &-Zeichen sollten Sie XHTML-kompatibel durch die entsprechende Entity-Referenz & ersetzen. Nun zu den Übergabeparametern:
- file=api bedeutet, dass es sich um die API handelt.
- v=2 bestimmt die Version.
- key=IHRKEY: Schreiben Sie anstelle von IHRKEY den API-Schlüssel.
- sensor=false Auch dieser Parameter ist unumgänglich: Schreiben Sie hier true, falls Sie einen Sensor nutzen, um den Standort des Benutzers zu ermitteln, false, wenn nicht.
<script type="text/Javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.
getElementById("karte"));
map.setCenter(new GLatLng
(48.1371155, 11.5748594), 16);
map.setUIToDefault();
}
}</script>Die Funktion GBrowserIsCompatible() überprüft, ob ein kompatibler Browser eingesetzt ist. Google Maps funktioniert ab Firefox 2.0, Internet Explorer 6.0, Safari 3.1 oder Google Chrome.Dann wird eine neue Instanz der GMap2-Klasse erstellt. In runden Klammern geben Sie das Element an, das die Karte beinhaltet. Im Beispiel ist es mit einer id gekennzeichnet, sodass Sie es komfortabel über document.getElementById("karte") auswählen können. Schließlich definieren Sie das Kartenzentrum:
map.setCenter(new GLatLng(48.1371155,
11.5748594), 16);Die Bestimmung des Orts erfolgt über das GLatLng-Objekt, dem Sie zuerst einen Breiten-, dann einen Längengrad übergeben. Außerdem geben Sie die Zoomstufe an, im Beispiel 16. Hier sind Werte zwischen 0 (die gesamte Erde) und 19 (einzelne Gebäude sind zu sehen) möglich. Es gibt allerdings nicht zu allen Gebieten Kartenmaterial für alle Zoomstufen.Über die folgende Zeile sorgen Sie dafür, dass die Standardbedienelemente angezeigt werden:
map.setUIToDefault();Damit sind Bedienfelder zum Verschieben und Zoomen vorhanden, der Benutzer kann zwischen verschiedenen Kartentypen wechseln und unten links ist der Kartenmaßstab eingeblendet. Nun sind die Angaben im head-Bereich abgeschlossen und es folgt der body des Dokuments.
</head><body onload="initialize()" onunload=
"GUnload()"><div id="karte"></div></body></html>Die Funktion zur Erstellung der Karte wird im body-Element mit onload aufgerufen. Gleichzeitig sollten Sie bei onunload GUnload() aufrufen, um bestimmte Speicherlecks im IE zu verhindern. Außerdem brauchen Sie den eigentlichen Kartencontainer, der im Beispiel id="karte" erhält.
