In den nächsten Tagen und Wochen werde ich häufiger über die Google Maps API V3 berichten, da ich gerade ein Projekt mit Google Maps angehe bietet sich das quasi an. Ich habe mich vor ein paar Jahren bereits mit der V2 der Google Maps API beschäftigt, doch diese ist mittlerweile veraltet. Allerdings findet man im Internet fast nur Beispiele in Verbindung mit der Version 2.
Aus Geschwindigkeits- und Kompatiblitätsgründen habe ich mich jetzt für die Google Maps API V3 entschieden und werde dies natürlich mit bestem Gewissen dokumentieren. Der in der Version 2 noch benötigte Google API-Key wird in der V3 nicht mehr benötigt. Das folgende Beispiel habe ich der aus der offiziellen Google-Dokumentation entnommen.
Solltet ihr bereits Kenntnisse in HTML und Javascript haben, kommt euch die Google Maps API V3 sehr entgegen. Andernfalls müsstet ihr euch noch gezielt einarbeiten, was aber auch kein allzu großes Problem darstellt. Das folgende Beispiel zeigt einen Kartenausschnitt, der auf Köln zentriert ist.
- Integrieren der Google Maps API
- DIV-Element mit der Bezeichnung “map_canvas”
- Karteneigenschaften angeben
- Kartenobjekt erstellen
- Karte laden und anzeigen
- Zusammenfassung
1. Integrieren der Google Maps API
[cc lang="html"]
[/php]
Im <head>-Bereich eurer Seite muss die Google Maps API mit Hilfe des Script-Tags geladen werden. Der Sensor-Parameter muss in jedem Fall mit übergeben werden, für unsere Beispiele reicht es dort false einzutragen. Wollt ihr später den den Standort des jeweiligen Benutzers zu bestimmen, müsst ihr dort true eintragen.
2. DIV-Element mit der Bezeichnung “map_canvas”
[cc lang="html"]
[/php]
Innerhalb des <body>-Tags legt ihr einfach einen DIV-Container mit der ID map_canvas an. Hier wird später die Google Maps Karte zu sehen sein. In unserem Beispiel ist die Karte 600 Pixel breit und 400 Pixel hoch. Diese Werte könnt ihr natürlich beliebig verändern.
3. Karteneigenschaften angeben
[cc lang="js"]
[/php]
Die Karteneigenschaften und die Position des Kartenausschnitts werden innerhalb der Funktion initialize() festgelegt. Die Variable latlng enthält die geografischen Breiten- und Längenangaben für Köln.
Das Zoomlevel habe ich auf die achte Stufe eingestellt, wobei Zoomlevel 0 die größtmögliche Ansicht zeigt. Je näher ihr hereinzoomt, desto mehr Details werdet ihr erkennen. Wenn es gutes Fotomaterial von einer Gegend gibt könnt ihr bis maximal Zoomlevel 15 zoomen, dieser ist aber nicht in allen Regionen verfügbar.
Zentriert wird die Karte über die Option center und der in der Variable latlng gespeicherten Werte. Mit der Variable mapTypeId könnt ihr angeben welcher Kartentyp dargestellt werden soll, ich habe hier in meinem Beispiel google.maps.MapTypeId.ROADMAP eingestellt.
Auswahl der verfügbaren Kartentypen
- ROADMAP zeigt die normalen Standard-2D-Kacheln von Google Maps an
- SATELLITE zeigt Fotokacheln an
- HYBRID zeigt eine Mischung aus Fotokacheln und eine Kachelebene für markante Merkmale an (Straßen, Ortsnamen)
- TERRAIN zeigt Reliefkacheln für Erhebungen und Gewässer (Berge, Flüsse usw.) an
[cc lang="js"]
var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
[/php]
Mithilfe von new google.maps.Map wird nun die eigentliche Karte in unserem DIV-Container map_canvas erzeugt, diese wird allerdings noch nicht angezeigt. Die Karte wird mit unseren oben festgelegten Optionen unter myOptions erzeugt. Die Karte wird jetzt erstmal in der Variable map gespeichert.
[cc lang="js"]
[/php]
Endlich kommen wir nun dazu die erstellte Karte in unserem DIV-Container anzuzeigen. Das geschieht mit dem onload-Ereignis im <body>-Tag, wo wir die erstellte JavaScript-Funktion initialize() ausführen. Damit stellen wir sicher, dass die Karte erst nach dem vollständigen Ladevorgang der Seite in unserem <div>-Tag angezeigt wird.
Auf den im <head>-Tag verwendeten meta-Tag Viewport werde ich in einem der nächsten Teile näher eingehen.
[cc lang="html"]
[/php]
Hier habe ich euch alle Code-Schnipsel zur besseren Ansicht zusammengefügt.
[cc lang="js"]
[/php]
So sollte die erzeugte Karte jetzt bei euch aussehen
Pingback: Google Maps API V3 – Spracheinstellungen
10. März 2011 um 13:13 Uhr
Hallo,
gibt es für V3 so etwas wie einen Genrator, der den kompletten Code für die eigene HP erstellt, und nur noch auf der richtigen Seite eingefügt werden muss?
Ich komme nicht klar
11. März 2011 um 10:48 Uhr
Ich kenne keinen Generator dafür. Die Angaben in meiner Zusammenfassung unter Punkt 6 sollten aber ausreichen um eine Karte auf einer Seite anzuzeigen.
Was funktioniert denn nicht?
11. März 2011 um 14:56 Uhr
ich hab den code so eingefügt, es ging nichts. Mein gesamter Quellcode war danach auf dieser Seite gelöscht