Wie versprochen kommt heute der erste Teil des Google Maps Tutorials, dass sich primär mit der API an sich und JavaScript beschäftigen wird. Bevor wir irgendetwas in Richtung PHP/MySQL unternehmen, müssen erstmal die Grundlagen sitzen. Wie bei der Amazon Product Advertising API braucht man auch für Google Maps einen API-Key, den gibt es hier. Lustigerweise benötigt man für fast jede Installation einen eigenen API Key, da er immer nur für ein Verzeichnis gilt. Man könnte jetzt sagen man holt nur einen Key für eine Domain (nämlich fürs Hauptverzeichnis), dies ist aber in der Regel eine schlechte Idee!
Die Anzahl der API-Aufrufe ist (natürlich) limitiert. Auch wenn es sehr schwer sein dürfte diese Grenzen zu überschreiten, so ist es dennoch besser innerhalb einer Domain bei verschiedenen Maps-Anwendungen auch verschiedene Keys zu verwenden. Hat man einen Key kann man auf einer fertigen HTML-Karte dann auch schon das notwendige JavaScript einbinden:
KEY muss jetzt natürlich mit eurem API-Key ersetzt werden. Ferner brauchen wir einen DIV-Layer in der HTML-Seite, der später durch JavaScript mit einer entsprechenden Landkarte ersetzt wird:
Mittels eines OnLoad-Events kann nun die Karte initialisiert werden. Mittels einer Google-eigenen Funktion entfernt man die Maps-Anwendung wieder:
Die Funktion Gunload() ist Bestandteil der API und braucht uns im Moment nicht weiter zu interessieren. Die Funktion initialize() hingegen schon. Da diese nicht in der API existiert müssen wir eine solche im Head der HTML-Seite anlegen:
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(50.94124490642813, 6.958165168762207),13);
map.setUIToDefault();
}
}
Der Code ist eigentlich selbsterklärend. Der Code wird nur in einem kompatiblen Browser ausgeführt. Eine neue Karte wird in den Div-Layer map_canvas eingefügt und dann die Karte auf die von mir eingegebenen Koordination (Kölner Dom) gesetzt. Zu guter Letzt verpassen wir der Karte noch das bekannte Standard-User-Interface. Eigentlich einfach, oder?
Tja, dachte ich eigentlich auch, bis ich zu dem Punkt gelangte wo ich die Koordinaten des Kölner Dom’s haben musste. So etwas weiß man (Gott sei Dank?) ja nicht auswendig. Geholfen hat mir hier eine kleine Google Maps Anwendung, mit der man einfach zum gewünschten Punkt scrollen kann, diesen anklickt und dann die Koordinaten bekommt. Dies ist zwar ganz nett zum Ausprobieren, aber kein Dauerzustand. Hier müssen wir auf jeden Fall eine einfachere Methode finden!
Insofern ergibt sich eine lange Latte an Aufgaben, die wir in den nächsten Teilen des Tutorials abarbeiten müssen:
- Wir wollen nicht ständig irgendwo Koordinaten suchen müssen, insofern müssen wir uns mit Geocodierung beschäftigen
- Wir wollen Placemarks setzen, die ein HTML-Popup besitzen
- Wir wollen in JavaScript eine Event-Steuerung, damit wir Aktionen durchführen können, wenn sich die Karte zum Beispiel bewegt oder man einen bestimmten Punkt anklickt
Ist ja wahnsinn. ich hab ehrlich gesagt nicht verstanden, wofür man API braucht und vor allem, wie man diese dusseligen Meldungen wegkriegt: „Diese Seite benötigt eine API tralala.“ Wenn mir so eine Seite begegnet benutze ich sie einfach nicht mehr. Ein Kunde weniger. Nebenbei: Ich bi Ingenieur und progtrammeiere auch ein bisschen.
Ralf
[…] die ersten Schritte mit JavaScript und der API von Google Maps dreht sich der erste Teil des Tutorials von Guido Mühlwitz, mit dem er zeigen möchte, wie man mit der Google Maps API ein Mashup für die eigene Seite […]