Tutorial Google Maps API – die Anfänge mit JavaScript

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:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEY" type="text/javascript"><!--mce:0--></script>

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:

Ähnliche Beiträge

d3.js – Visualisierung von Daten mit Javascr... Seit dem ganzen Hype um das Canvas-Element in HTML5 ist es scheinbar zu einem Volkssport geworden, Libraries für Javascript zu entwickeln, die entwede...
TransformJS – einfache Transforms mit JavaSc... CSS Transforms sind eigentlich fester Bestandteil jedes Browser - dummerweise in jedem Browser ein klein wenig anders, und dummerweise auch mit andere...
Google Maps API – Geocodierung In den bisherigen Teilen des Tutorials haben wir eine Adresse immer mittels der Koordinaten übergeben. Wie schon festgestellt birgt das einiges an Pro...
jsPDF – PDF-Dateien mit JavaScript erzeugen PDF-Dateien sind aus der modernen Geschäftswelt nicht mehr wegzudenken, was insbesondere bedeutet das man diese in einer Applikation erzeugen muss. PD...

2 Antworten auf „Tutorial Google Maps API – die Anfänge mit JavaScript“

  1. 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

  2. Pingback: Tutorial: Einstieg in die Google Maps API » t3n Magazin

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.