[Tutorial] Die ersten Schritte mit der Google Maps API

**Cybergreek** · 18.10.2008, 23:40

Vorwort
Geografische Daten werden immer öfter auf Internetseiten benutzt um Informationen visuell rüberzubringen. Eine Karte hat jeder schon einmal außerhalb des Internet gesehen (sozusagen in einer offline-Version), so dass dies eigentlich die Art der Darstellung ist, die am schnellsten verstanden wird.
Mit Hilfe von Google Maps und der von Google zur Verfügung gestellten API ist es möglich dynamische Karten auf der eigenen Internetseite unterzubringen. Mittlerweile gibt es etliche Mashups, die sogar auf Google Maps basieren.

Doch genug der Einführung, worum geht es hier?
In diesem Tutorial soll die einfache Erstellung einer Karte aufgezeigt werden. Hierbei werden die grundlegenden Techniken aufgezeigt. Der erste Schritt in die Entwicklung einer eigenen Karte soll hiermit erleichtert werden.

Voraussetzungen

HTML Grundlagenwissen
JavaScript Grundlagenwissen

Vorbereitungen

Es wird ein Google-Account benötigt, der natürlich kostenlos ist.
Mit diesem Google-Account kann ein Google Maps API-Schlüssel generiert werden. Dieser ist nur für die in der Anmeldung angegebene Domain gültig. Die Verwendung selbst ist an ein paar Bedingungen geknüpft, die aber die meisten erfüllen sollten.

Die erste (nackte) Karte
Die Google Maps API ist eine JavaScript-Bibliothek, die die Grundlage unserer Karten bildet. Google stellt hier die Referenz zu der Google Maps API zur Verfügung.
Schauen wir uns mal ein Beispiel an:

HTML-Code:

<head>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=DER-KEY" type="text/javascript">
  </script>

  <script type="text/javascript">
  function fctOnload() {
    //Überprüfung, ob der Browser Google Maps-fähig ist
    if (GBrowserIsCompatible()) {
      //Ein neues Google Maps-Objekt wird erstellt
      var map = new GMap2(document.getElementById("google_map"));

      //Der zentrale Punkt der Karte wird definiert
      var point = new GLatLng(50.945017, 6.959839);

      //Die Karte wird bei diesem Punkt zentriert
      map.setCenter(point, 12);
    }
  }
  </script>
</head>
<body onload="fctOnload()" onunload="GUnload()">
  <!--ein div-Container, der durch JavaScript mit der Karte gefüllt wird-->
  <div id="google_map" style="width: 500px; height: 300px"></div>
</body>

Das Ergebnis wird hier dargestellt.

Was passiert hier?
Zunächst einmal wird das JavaScript von Google eingebunden:

HTML-Code:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=DEIN-GOOGLE-MAPS-KEY" 
  type="text/javascript">
</script>

Im HTML-Bereich unserer Seite benötigen wir nur einen div-Container, der über seine id angesteuert werden kann:

HTML-Code:

  <!--ein div-Container, der durch JavaScript mit der Karte gefüllt wird-->
  <div id="google_map" style="width: 500px; height: 300px"></div>

Der Kernstück (und der Teil des Quelltextes, den wir uns noch genauer anschauen werden) wird wie folgt nach erfolgreichem Laden der Seite aufgerufen:

HTML-Code:

<body onload="fctOnload()" onunload="GUnload()">

Der Teil onunload="GUnload()" ruft beim Verlassen der Seite eine Funktion aus der Google Maps API auf, die alles zuvor Erstellte bereinigt. Damit werden Ressourcen wieder freigegeben, was eigentlich Aufgabe des Browsers sein sollte, aber nicht von jedem Browser korrekt umgesetzt wird.

Kommen wir aber endlich zu der Funktion, die uns die Karte auf die Seite bringt:

HTML-Code:

function fctOnload() {
  //Überprüfung, ob der Browser Google Maps-fähig ist
  if (GBrowserIsCompatible()) {
    //Ein neues Google Maps-Objekt wird erstellt
    var map = new GMap2(document.getElementById("google_map"));

    //Der zentrale Punkt der Karte wird definiert
    var point = new GLatLng(50.945017, 6.959839);

    //Die Karte wird bei diesem Punkt zentriert
    map.setCenter(point, 12);
  }
}

Als erstes wird mit GBrowserIsCompatible() die Eignung des Browsers auf Google Maps überprüft. Dies hat den Hintergrund, dass ältere Browser die JavaScript-Funktionen, die Google Maps verwendet, nicht korrekt bzw. garnicht ausführen können.

Mit new GMap2(document.getElementById("google_map")); wird ein neues Karten-Objekt erzeugt und in dem Seiten-Element mit der ID "google_map" (der eben angesprochene div-Container) untergebracht.

Als nächstes wollen wir der Karte noch sagen, was sie zeigen soll. Dafür wird zum einen ein Punkt benötigt, der das Zentrum darstellt und zum anderen eine Zahl die den Zoom-Faktor angibt. Das kann alles in einer Zeile untergebracht werden, der Übersicht halber aber nehmen wir hier zwei Zeilen.
Die erste Zeile (var point = new GLatLng(50.945017, 6.959839);) definiert den Punkt mit zwei Koordinaten (dazu gleich mehr). Die zweite Zeile (map.setCenter(point, 12);) platziert diesen Punkt als Zentrum in die Karte. Die "12" ist in diesem Fall der Zoom-Faktor, der von 1 bis ca. 20 gehen kann. "ca." weil der maximale Zoom-Faktor von der anzuzeigenden Gegend abhängig ist.

Aber was bedeuten die beiden Parameter in GLatLng()?
"GLatLng" kürzt die englischen Begriffe "latitude" und "longitude" ab, die für Breiten- und Längengrad stehen. Diese beiden Angaben definieren den genauen Standort eines Punktes auf der Weltkarte und können z.B. hier bestimmt werden.

Die nackte Karte kriegt was angezogen
Bisher haben wir nur eine Karte für einen bestimmten Standort erstellt. Diese Karte kommt ohne jegliche Navigationsleisten oder sonstigen Zusätzen daher. Da aber die meisten Google Maps Benutzer Pfeile, Zoomleisten, Übersichtskarten usw. gewohnt sind, gucken wir uns jetzt mal an, wie wir diese Kontrollelemente auf unsere Karte kriegen.

Die vier wichtigsten Kontrollelemente werden hier jeweils mit einem Beispiel erklärt.
Um solche Zusätze einzubinden wird die Funktion addControl() verwendet. Dieser Funktion wird jeweils ein Kontrollelement als Parameter übergeben und das war's schon:

HTML-Code:

map.addControl(new GLargeMapControl());

Mit dieser Zeile wird die Navigationsleiste links oben eingebunden. Die Übergabe als Parameter erfolgt in der Form, dass ein neues Kontrollelement erzeugt wird (new GLargeMapControl()) und als Parameter verwendet wird. Neben der detaillierten Navigationsleiste gibt es auch eine kompaktere, die mit new GSmallMapControl() erzeugt wird, und eine noch kompaktere, die mit new GSmallZoomControl() erzeugt wird.

HTML-Code:

map.addControl(new GScaleControl());

Ein weiteres Kontrollelement stellt der Maßstabsbalken dar. Dieser wird mit new GScaleControl() erzeugt und ebenfalls mit der Funktion addControl() auf der Karte angezeigt.

HTML-Code:

map.addControl(new GMapTypeControl());

Die Auswahl des Kartentyps (Karte, Satellitenbilder oder Hybrid) kann mit dem Objekt GMapTypeControl() hinzugefügt werden. Hierbei gibt es die Option das Objekt GHierarchicalMapTypeControl() hinzuzufügen, was weiter konfigurierbar ist.

HTML-Code:

map.addControl(new GOverviewMapControl());

Das letzte Kontrollelement in dieser Runde bildet die Übersichtskarte. Diese kann mit dem Objekt GOverviewMapControl() eingebunden werden.

HTML-Code:

map.enableScrollWheelZoom();

Damit man in der Karte durch Scrollen rein- bzw. rauszoomen kann wird die Funktion enableScrollWheelZoom() benötigt.

Das war's auch schon.
Eine Live-Demo zum besseren Verständnis der einzelnen Kontrollelemente gibt es hier zu sehen.

Eine Markierung auf der Karte platzieren
Um auf der Karte einen besonderen Standort zu zeigen (wie z.B. das eigenen Unternehmens, oder den Standort eines Events), gibt es zwei Möglichkeiten. Die einfachere ist eine Sprechblase, ein sogenanntes InfoWindow, zu platzieren. Die etwas elegantere ist eine Markierung zu setzen. Der Vorteil bei der zweiten Möglichkeit ist, dass mehrere Markierungen auf der Karte gesetzt werden können.

Fangen wir aber mit der einfachen Sprechblase an

HTML-Code:

map.openInfoWindow(point, document.createTextNode("Das ist Köln"));

Die Funktion openInfoWindow() erwartet zwei Parameter und erstellt eine Sprechblase.

Der erste Parameter definiert die Positionierung der Sprechblase und ist ein Punkt-Objekt. Hierbei können wir wieder auf den Punkt zurückgreifen, den wir für die Zentrierung der Karte verwendet haben.
Der zweite Parameter definiert den Inhalt der Sprechblase und ist ein DOM-Objekt. Wem das nichts sagt, kann die Funktion openInfoWindowHtml() verwenden, die einen HTML-String als zweiten Parameter erwartet. Der Inhalt der Sprechblase ist also bei beiden Funktionen frei gestaltbar, so dass auch Bilder oder Links dort eingefügt werden können (Beispiel).

Kommen wir zu den Markierungen
Markierungen sind die bekannten Pinnnadeln, die bei der Suche auf Google Maps die Suchergebnisse markieren. Solche Markierungen lassen sich auch sehr einfach in die eigene Karte einbinden.

HTML-Code:

var marker = new GMarker(point);
map.addOverlay(marker);

Solch ein Markierung wird mit dem GMarker-Objekt erzeugt. Bei der Initiierung des Objekts wird als Parameter ein Punkt übergeben. Hierbei können wir wieder unseren point verwenden.
Nachdem wir dieses Objekt erzeugt haben, können wir es mit der Funktion addOverlay() auf der Karte platzieren. addOverlay() braucht als einzigen Parameter die zuvor erzeugte Markierung.

An diese Markierung kann auch eine Sprechblase gehangen werden, die auf Zuruf (also Klick) geöffnet wird.

HTML-Code:

GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml("Das ist Köln!<br /><br /><a href=''>Zurück zum Tutorial</a>");
});

Über addListener() wird ein Funktionsaufruf an ein bestimmtes Ereignis gehangen. Hört sich kompliziert an, ist es aber nicht.
Die einzelnen Parameter zum besseren Verständnis:

1. Parameter: Der Marker der auf ein bestimmtes Ereignis hin überwacht wird. In diesem Fall, der gerade erstellte Marker (marker).
2. Parameter: Das Ereignis bei dem was passieren soll. In diesem Fall ein Klick (click).
3. Parameter: Die Funktion, die aufgerufen wird, sobald das Ereignis, also der Klick, passiert.

Die Funktion, die hier übergeben wird, kennen wir schon aus einem anderen Kontext. openInfoWindowHtml() haben wir eben auf die Karte angewandt, wobei wir einen Punkt mit übergeben mussten. In diesem Fall wird openInfoWindowHtml direkt auf eine Markierung angewandt, so dass nur der Inhalt der Sprechblase als Parameter übergeben werden muss. Ein mögliches Ergebnis findet sich hier.

Solche Markierung können auf eine Karte beliebig oft gesetzt werden. Hier wird es interessant, wenn die Marker dynamisch generiert werden.

It's your turn
Ein kleines Beispiel zum Schluss des Tutorials, wo jeder selbst ein bisschen rätseln darf:

PHP-Code:


$markerArr = array ("(40.4, 19.7)", "(40.4, 20.2)", "(40.4, 20.7)", "(40.4, 21.2)", "(40.4, 21.7)",

                    "(40.4, 22.2)", "(40.4, 22.7)", "(39.9, 21.2)", "(39.4, 21.2)", "(38.9, 21.2)",

                    "(38.4, 21.2)", "(37.9, 21.2)", "(37.4, 21.2)", "(40.4, 25.2)", "(39.9, 25.2)",

                    "(39.4, 25.2)", "(38.9, 25.2)", "(38.4, 25.2)", "(37.9, 25.2)", "(37.4, 25.2)",

                    "(40.4, 25.7)", "(40.4, 26.2)", "(40.4, 26.7)", "(40.15, 26.95)", "(39.9, 27.2)",

                    "(39.65, 27.35)", "(39.4, 27.2)", "(39.15, 26.95)", "(38.9, 25.7)", "(38.9, 26.2)",

                    "(38.9, 26.7)");



for ($i = 0; $i != count($markerArr); $i++) {

  echo "var point_".$i." = new GLatLng".$markerArr[$i].";\n";

  echo "var marker_".$i." = new GMarker(point_".$i.")\n";

  echo "map.addOverlay(marker_".$i.");\n\n";

}

Links
Allgemeines

benutzte Funktionen der Google Maps API

**fuchzga** · 19.10.2008, 00:01

Wow! In das Thema wollte ich mich schon immer mal reinknien.
Hatte bisher aber keine Zeit zum einlesen gefunden.
Dein Tutorial macht es mir leicht.
Dafür meinen Dank.

**phpBuddy** · 19.10.2008, 00:06

Gute Arbeit, Grieche!
Liest sich gut und ist verständlich geschrieben.

**Cybergreek** · 19.10.2008, 10:29

Danke für's Feedback an Euch beide. Das freut mich zu hören, dass man es gut lesen kann.

Ihr könnt hier natürlich auch Eure Ergebnisse zeigen, nicht dass ich neugierig wäre

**koenixblau** · 19.10.2008, 11:43

Vielen lieben recht herzlichen Dank!

zur Startseite vom TP

Thema: [Tutorial] Die ersten Schritte mit der Google Maps API

LinkBack

Themen-Optionen

Thema durchsuchen

[Tutorial] Die ersten Schritte mit der Google Maps API

LinkBacks (?)

susannakuenzl's googlemaps Bookmarks on Delicious

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

Google Maps Api- Zwei Maps auf einer Seite

google suche - ergebnis mit link auf google maps

meine ersten div-schritte

Fireworks - die ersten Schritte

Stichworte

LinkBacks (?)

susannakuenzl's googlemaps Bookmarks on Delicious

Aktive Benutzer

Aktive Benutzer

Berechtigungen