Google Maps über API einbinden

2 | 1 Kommentar | 61122 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Google Maps über API einbinden" mit Ihrem Wissen!

Anzeige Hier werben

Wieso über API einbinden?

Neben diesem der Einbindung von Google Maps über API, steht zusätzlich die Möglichkeit zur Verfügung "Google Maps über "URL zu dieser Karte" Funktion in der eigenen Webseite zu integrieren. Dieses Verfahren ist jedoch nur für nicht-kommerzielle Zwecke gedacht. Möchten Sie Google Maps kommerziell nutzen, müssen Sie die Einbindung über die API vornehmen.

Ein weiterer Vorteil. Nutzen Sie Google Maps über die API, können Sie zusätzlich auf viele Funktionen der API zurückgreifen und letztendlich sogar eigene Google Maps Anwendungen entwickeln.

Google API-Key (Entwickler Key) besorgen

Für das Arbeiten mit der Google Maps API benötigt man einen Entwickler-Key, auch API-Key genannt. Diesen Key kann man sich kostenlos auf der Google Maps API Seite besorgen, wo man schnell und einfach einen Key anfordert. Name oder Anschrift muss nicht hinterlassen werden. Der Key ist jedoch immer nur für eine URL gültig. Sind Sie im Besitz eines gültigen API-Keys kann es auch schon losgehen.

API-Key einbinden

Die Grundlage für jedes Arbeiten mit Google Maps ist die Einbindung Ihres Keys im Head-Bereich der HTML-Seite. Unterhalb sehen Sie die Einbindung über JavaScript. Die Variable IHR_KEY ist natürlich durch Ihren eigenen Key zu ersetzen. Der Ausdruck v=2 gibt an, welche Version der API Sie von Google anfordern möchten.

 
JavaScript
1
2
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=IHR_KEY" 
type="text/javascript"></script>

Karte einbinden

Im ersten Schritt möchten wir eine einfache Karte von einem uns gewünschten Zielort auf der Webseite einbinden. Dazu verwenden wir im ersten Schritt einmal den Code den uns Google Maps auch bei der Anforderung eines Google API-Keys vorschlägt. Die einzelnen Schritte gehen wir dann unterhalb durch.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps Einbindung</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=IHR_KEY"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Zuerst wird der übliche Doctype und der Namespace (html xmlns) festgelegt. Neben der Einbindung des API-Keys im Head wird ein zusätzlich ein zweites JavaScript mit der Funktion load() angelegt, welches direkt die Google Maps Funktion GBrowserIsCompatible() aufgerufen, die überprüft, ob der Browser des Besuchers Google Maps unterstützt. Ist dies der Fall wird ein neues GMap2-Objekt angelegt und dem Objekt eine HTML-Element-ID zugeteilt, wo die Map später erscheinen soll. In unserem Fall ein DIV mit dem Namen map.

Bild zu Google Maps über API einbinden
Google Maps über API

Wofür der CDATA-Block

Der CDATA - Block definiert einen reinen Textbereich. Dies ist nötig, damit Zeichen wie <, >, & verwendet werden können, ohne dass diese als XML-Tags oder ähnliches erkannt werden und somit Ausdrücke wie "if (zahl1 > zahl2)" möglich sind und nicht escaped "if (zahl 1 &lt; zahl2)" werden müssen.

Im nächsten Schritt wird der Zielort angegeben, an dem die Karte zentriert (setCenter) ausgerichtet werden soll, wenn die Seite aufgerufen wird. Dazu werden drei Parameter übergeben, einmal für Breite (latitude), Länge (longitude) und die Zoomstufe, die zwischen 1 und 18 liegen kann.

Im Body-Bereich der Webseite wird abschließend noch definiert, dass die Funktion load() aufgerufen wird, sobald der Body-Teil geladen wird. Zusätzlich wird ein DIV mit der id="map" erstellt mit Breite 500px und Höhe 300px. Lädt man die HTML Seite jetzt auf die entsprechende Domain (die auch bei der API-Key Anmeldung verwendet wurde) erhält man eine Google Maps Karte mit dem Ausschnitt auf der rechten Seite.

Koordinaten

Sicherlich haben Sie sich schon gefragt wo Sie jetzt Ihre Koordinaten herbekommen, wenn Sie einen anderen Standort als die Stanford Universität für Ihre Karte einsetzen möchten. Sie können dafür entweder die Google Maps Klasse GClientGeocoder verwenden oder einen der vielen Dienste im Web nutzen die sich auf Geocoding spezialisiert haben wie www.geokodierung.net.

Bild zu Google Maps über API einbinden
Markierung in Google Maps hinzufügen

Möchte man die Koordinaten über die Klasse GClientGeocoder beziehen, ist dies ebenfalls möglich. Weitere Informationen zur Verwendung der Klasse, sowie einige Beispiele für die Verwendung bietet die Dokumentationsseite Geocoding Examples der Google Maps Doku.

Einfache Markierung hinzufügen

Abschließend möchten wir unserer Karte noch eine kleine Markierungsmarke hinzufügen, damit der Besucher auch erkennt, welcher Punkt auf der Karte genau gemeint ist. Die Koordinaten des Punktes sind die unseres Büros im Siemens IT-Park in Augsburg, für welches ich einen Marker setzen möchte. Entsprechende habe ich natürlich auch meine Google Map auf diese Koordinaten gesetzt. Wir

Unsere Funktion load() wird jetzt durch einen Markierungspunkt wie unten zu sehen ergänzt. Dazu wird erst ein Punkt erzeugt, welcher dann von einem Marker verwendet wird.

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    var punkt = new GLatLng(48.340181, 10.903297);
    map.setCenter(punkt, 15);
  
    var marke = new GMarker(punkt);
    map.addOverlay(marke);
  }
}

Achtung: In älteren Einführungen in die Google-Maps API wird häufig GPoint statt dem GLatLng-Objekt verwendet. Seit Version 2 der API wird GPoint allerdings eingesetzt um Pixel-Positionen zu markieren. Für geografische Positionen sollte in Zukunft deswegen immer das GLatLng-Objekt verwendet werden.
Bei Tests hat GPoint, entgegen der Aussagen aus der Google Dokumentation, aber weiterhin funktioniert. Allerdings sind die Parameter vertauscht, es muss also zuerst die Längenangabe, dann die Breitenangabe, übergeben werden.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "Google Maps über API einbinden" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Google Maps über API einbinden" hier bearbeiten.

Mitarbeiter
  • Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
  • David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 sowie Webmasterpro.de.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.

Kommentare: Google Maps über API einbinden

Neuen Kommentar schreiben
Marker aus XML-Datei bilden und automatisch einfügen
Beantworten

Google gibt auch noch Beispiele wie man Maps mit einer Datenbank koppelt und empfiehlt dabei den Zwischenschritt über eine XML-Datei. Ich würde den Artikel gern ergänzen, aber die Anwendung läuft bei mir noch nicht so wie gewünscht.

Hier sind die beiden Artikel aus der Google-Doku, die sind beide sehr ähnlich, vielleicht ergänzt ein Fuxx ja den Artikel.

http://code.google.com/apis/maps/articles/phpsqlajax.html

http://code.google.com/apis/maps/articles/phpsqlsearch.html

Jochen Bauer am 14.07.2008 um 14:08