Tutorial zu Google Maps – Die ersten Schritte - MashupYourLife.de

Okt 19

Tutorial zu Google Maps – Die ersten Schritte

Am Sonntag um 10:00 von Chrisostomos veröffentlicht

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 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:

<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 sieht dann so aus:

Was passiert hier?

Zunächst einmal wird das JavaScript von Google eingebunden:

<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:

<!--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:

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

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:

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 in der nächsten Karte ganz einfach 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:

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.

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.

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.

map.addControl(new GOverviewMapControl());

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

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

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. Und so sieht das Ganze aus:

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.

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.

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. Und so sieht diese Karte aus:

8 Kommentare über “Tutorial zu Google Maps – Die ersten Schritte”

Google Maps in Website einbinden - CREATESOMFING.com | CREATESOMFING.com schrieb:
Montag 20. Oktober 2008 um 15:16
[...] ihr Google Maps nun auf eure eigene Website einbinden wollt, solltet ihr euch das Tutorial von mashupyourlife oder das von NETTUTS (Videotutorial) [...]
tefly schrieb:
Dienstag 21. Oktober 2008 um 16:39
vielen dank! großartig!
Chrisostomos schrieb:
Dienstag 21. Oktober 2008 um 19:32
Vielen Dank für das Feedback tefly!

Natürlich bin ich neugierig, ob das Tutorial zu irgendwelchen vorzeigbaren Ergebnissen führen konnte.
Also wenn Ihr was habt, dann ruhig einen Link hier posten
Texmexx schrieb:
Donnerstag 30. Oktober 2008 um 09:21
Hi! Das ist genau das was ich gesucht habe, vielen Dank für die übersichtliche und gute Aufbereitung!!
Grüße
Tex
Chrisostomos schrieb:
Samstag 1. November 2008 um 12:58
Auch Dir, Texmexx, vielen Dank für das Feedback.
Bei positivem Feedback steigt natürlich die Motivation weiterzumachen
vincent schrieb:
Mittwoch 19. November 2008 um 13:26
danke für die Infos, gibt es noch weitere Infos, zum Beispiel wie man eine Liste von Punkte hat und diese dann durchlaufen kann (wie ein Film) mit verschiedenen Zoomfaktoren ?
Chrisostomos schrieb:
Mittwoch 19. November 2008 um 14:22
Hallo vincent,

es wird vermutlich auch eine Fortsetzung der Tutorials geben. Das, was Du beschreibst, findest Du aber jetzt schon hier als Beispiel: http://wolfpil.googlepages.com/anim.html
Thomas Weise schrieb:
Dienstag 30. Dezember 2008 um 17:24
Eventuell ist folgender Link eine Bereicherung dieses Artikels: http://progtw.de/blog/google-maps-tutorial/

MashupYourLife.de