Google Maps API: Koordinaten eines Markers in PHP auslesen

Google Maps API

Die Google Maps API ist die meistverwendete Kartenapplikation im Internet. Programmierer können die kostenlose Programmierschnittstelle (API) nutzen, um Nutzer mit den Karten interagieren zu lassen – zum Beispiel, um den Nutzer seinen Wohnort auf der Karte auswählen zu lassen. Im Rahmen dieses Tutorials erfahren Sie, wie die Platzierung eines Markers durch den Anwender über die Google Maps API realisiert und an ein PHP Programm übergeben werden kann.

Anwendungsbeispiel

Nehmen wir an, Sie betreiben ein Branchenverzeichnis für Milchbauern. Wenn ein neues Unternehmen hinzugefügt wird, soll der Standort des Bauernhofes übermittelt werden. An dieser Stelle können Sie die Google Maps API anwenden: Der User erhält einen Kartenausschnitt, auf dem er einen sogenannten Marker platzieren kann. Speichert er das Formular ab, sollen die Koordinaten des Markers ausgelesen und an ein PHP-Script übergeben werden, um sie beispielsweise in eine Datenbank zu speichern.

Technische Vorgehensweise

Ziel der Anwendung ist die Übermittlung der durch den Nutzer auf der Karte ausgewählten Koordinaten, also der geografischen Breite (Latitude) und der geografischen Länge (Longitude), in Form von PHP-Variablen. Dazu werden zwei Dateien benötigt: Erstens eine HTML-Datei, auf der wir die Karte platzieren werden, im Folgenden handelt es sich dabei um die karte.html. Zweitens wird ein PHP-Script zur Verarbeitung der durch $_POST übermittelten Daten benötigt, im Folgenden wird mit einer maps.php gearbeitet.

Schritt 1: API-Key registrieren

Wer mit der Google Maps API arbeiten möchte, benötigt einen API-Key. Dieser ist kostenlos und muss unter http://code.google.com/intl/de-DE/apis/maps/signup.html registriert werden.

Schritt 2: Karte in der HTML-Datei platzieren

Im zweiten Schritt muss die vorher angesprochene karte.html angelegt werden. Hierfür kann die folgende Vorlage verwendet werden, wobei IHR_API_KEY_HIER durch den vorher generierten Google Maps API Key zu ersetzen ist:

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
26
27
28
29
30
31

<html>
 <head>
  <title>Google Maps API und PHP</title>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=IHR_API_KEY_HIER" type="text/javascript"></script>
 </head>
 <body onunload="GUnload()">
 
 <div id="map" style="width: 500px; height: 400px"></div>
 
 <script type="text/javascript">
  // Überprüfen, ob der Browser des Benutzers mit der Google-Maps API kompatibel ist
  if (GBrowserIsCompatible()) 
  {
   // Dem Div-Container mit der ID 'map' die Karte zuweisen
   var map = new GMap2(document.getElementById("map"));
 
    //Der Karte Kontrollelemente (Zoom + Richtung) zuweisen
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
 
   //Die Karte auf Deutschland ausrichten; erst werden die Koordinaten festgelegt, dann der Zoomfaktor von 5
   var center = new GLatLng(50.95, 10.28);
    map.setCenter(center, 5);
  }
  else
  {
   alert("Leider ist Ihr Browser mit der Google-Maps API nicht kompatibel!");
  }
 </script>
 </body>
</html>

Bei Aufruf der nun erstellten karte.html erhält der Nutzer eine auf Deutschland gerichtete Karte. Ihm werden die Werkzeuge “Zoom” und “Richtung” mit an die Hand gegeben, um innerhalb der Karte zu navigieren und später den Marker platzieren zu können.

Schritt 3: HTML-Datei für Datenübergabe modifizieren

Im folgenden Schritt wird der Benutzer einen Marker platzieren können – er übermittelt im Hintergrund also die Informationen für die geografische Länge und die geografische Breite. Um diese an ein PHP-Script zu übergeben, müssen sie zunächst innerhalb der HTML-Datei zwischengespeichert werden. Hierfür werden wir uns innerhalb eines HTML-Formulars zwei versteckten INPUT-Feldern sowie eines SUBMIT-Buttons bedienen, über den der Nutzer nach Auswahl der Kartenposition die Eingaben speichern kann. Die Erweiterung der HTML-Datei sieht wie folgt aus:

1
2
3
4
5

<form action="maps.php" method="post">
 <input type="hidden" id="lat" name="lat" value="50.95" />
 <input type="hidden" id="lng" name="lng" value="10.28" />
 <input type="submit" value="Auswahl speichern">
</form>

Schritt 4: Den Marker hinzufügen

Was nun noch fehlt ist der Marker, der in der Dokumentation der Google Maps API eine freiverschiebbare Markierung genannt wird (weitere Informationen: Code Dokumentation Google). Fügen Sie also folgende Codezeile unter Zeile 23 (map.setCenter(center, 5);) aus dem obrigen Beispiel ein.

1

marker = new GMarker(center, {draggable: true});

Nun muss das Script noch angewiesen werden, die value-Werte der versteckten INPUT-Felder durch die durch den Nutzer ausgewählten Koordinaten zu ersetzen:

1
2
3
4
5

GEvent.addListener(marker, "dragend", function() 
 {
 document.getElementById('lat').value = marker.getPoint().lat();
 document.getElementById('lng').value = marker.getPoint().lng();
 });

… um anschließend den Marker noch zur Karte hinzuzufügen:

1

map.addOverlay(marker);

Zwischenergebnis: Fertigstellung der karte.html

Wenn Sie die vorherigen Schritte befolgt haben, wird Ihre vollständige karte.html nun folgendermaßen aussehen:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<html>
 <head>
  <title>Google Maps API und PHP</title>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=IHR_API_KEY_HIER" type="text/javascript"></script>
 </head>
 <body onunload="GUnload()">
 
 <div id="map" style="width: 500px; height: 400px"></div>
 
 <form action="maps.php" method="post">
  <input type="hidden" id="lat" name="lat" value="50.95" />
  <input type="hidden" id="lng" name="lng" value="10.28" />
  <input type="submit" value="Auswahl speichern">
 </form>
 
 <script type="text/javascript">
  // Überprüfen, ob der Browser des Benutzers mit der Google-Maps API kompatibel ist
  if (GBrowserIsCompatible()) 
  {
   // Dem Div-Container mit der ID 'map' die Karte zuweisen
   var map = new GMap2(document.getElementById("map"));
 
    //Der Karte Kontrollelemente (Zoom + Richtung) zuweisen
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
 
   //Die Karte auf Deutschland ausrichten; erst werden die Koordinaten festgelegt, dann der Zoomfaktor von 5
   var center = new GLatLng(50.95, 10.28);
    map.setCenter(center, 5);
 
   // Marker als 'verschiebbare Markierung' erstellen
   marker = new GMarker(center, {draggable: true});
 
   // Wenn der Marker fallengelassen wird, die Koordinaten in die INPUT-Felder speichern
   GEvent.addListener(marker, "dragend", function() 
   {
    document.getElementById('lat').value = marker.getPoint().lat();
    document.getElementById('lng').value = marker.getPoint().lng();
   });
 
   // Marker der Karte hinzufügen
   map.addOverlay(marker);
  }
  else
  {
   alert("Leider ist Ihr Browser mit der Google-Maps API nicht kompatibel!");
  }
 </script>
 </body>
</html>

Schritt 5: Das PHP-Script maps.php

Nun ist der größte Teil der Anwendung fertig – fehlt nur noch das PHP-Script maps.php zum Auslesen der ausgewählten Koordinaten. Hierbei werden einfach die Werte der versteckten INPUT-Fleder über as superglobale Array $_POST ausgelesen:

1
2
3
4

<?php
 $lat = $_POST["lat"];
 $lng = $_POST["lng"];
?>

Ab sofort stehen die Breitenangabe ($lat) und die Längenangabe ($lng) in Form von PHP-Variablen zur weiteren Verarbeitung zur Verfügung. Nun wäre beispielsweise die Speicherung in eine MySQL-Datenbank möglich.

Ausblick

Eine Verbesserung der besprochenen Anwendung wäre sicherlich eine Erweiterung mittels AJAX, sodass die Benutzerangaben komplett im Hintergrund gespeichert werden, ohne, dass der Nutzer erst ein HTML-Formular absenden muss.

Trotzdem haben Sie auch mit dieser Version ein starkes Werkzeug, um eine geografische Benutzerinteraktion zu erlauben. In der oben verlinkten Google Code Dokumentation finden sich weitere Möglichkeiten, wie die Karte noch benutzerfreundlicher gestaltet werden kann: Zum Beispiel über ein Suchfeld, in das ein Ort oder eine Postleitzahl eingegeben werden kann – so ersparen sich die weniger in Geografie bewanderten Nutzer langes Suchen auf der Karte.

Veröffentlicht am 10. Februar 2011, abgelegt unter Programmierung

Weitere interessante Artikel

5 Kommentare

Tino
Tino sagt:

Hallo,
ich beschäftige mich erst seit dieser Woche mit der Google Maps API.
Das Tutorial hat mir nun super geholfen und ich konnte das Script so anpassen das ich Objekte auswähle, diese Koordinaten in einer DB speicher und auf der Webseite ausgeben kann.

Vorher musste ich mir die Koordinaten immer erst manuell ermitteln und in die DB speichern.

Danke. Super Beitrag!

Gruß Tino

# 16 Februar 2011 um 08:33 Uhr
Matthias Rasche
Matthias Rasche (Redaktion) sagt:

Danke für Dein Feedback, Tino. Und viel Erfolg bei den weiteren Arbeiten mit der Google Maps API. :)

Viele Grüße,
Matthias Rasche

# 16 Februar 2011 um 09:59 Uhr
Zinker
Zinker sagt:

Hallo,
vielen Dank für die zur Verfügung gestellten Informationen.
Ich habe dazu eine Frage.
Du hast das Beispiel mit der Google API v2 erstellt.
Klappt das mit der v3 genauso?
Hat es einen bestimmten Grund dass du die v2 bevorzugt hast?

Grüße

# 18 April 2011 um 15:52 Uhr
Matthias Rasche
Matthias Rasche (Redaktion) sagt:

Hallo Zinker,

das Tutorial stammt von Juni 2009 und wurde in überarbeiteter Form aus meinem alten Webentwicklungs Blog übernommen. Es dürfte auch mit V3 funktionieren, versprechen kann ich es allerdings nicht, da ich es noch nicht ausprobiert habe und derzeit leider auch nicht UpToDate mit der neuen Version der Google Maps API bin.

Solltest Du es mit V3 ausprobieren, kannst Du ja kurz hier kommentieren, ob es funktioniert hat. :)

Viele Grüße,
Matthias Rasche

# 18 April 2011 um 16:26 Uhr
Social Media Marketing
Social Media Marketing sagt:

Hallo,

auch ich setze die Google Maps API hier ein: http://www.kaldewei.de/dialog/endkunden/haendlersuche/

Nur verwendete ich auch etwas Ajax …

# 26 August 2011 um 13:45 Uhr

Hinterlassen Sie einen Kommentar!

Hinterlassen Sie einen Kommentar oder schicken Sie einen Trackback von Ihrem Blog.
Sie können außerdem weitere Kommentare via RSS abonnieren.

Neue Artikel im Magazin

qr-code linknetzwerke-1 Einführung in responsives Webdesign WordCamp Köln 2011
RSS Feed abonnieren

Anzeigen

Leistungen: PHP Programmierung

WebundSEO entwickelt als Dienstleister individuelle Webanwendungen auf Basis von PHP und MySQL. Sprechen Sie uns an, wir finden auch für Ihr Vorhaben die passende Lösung.

WebundSEO auf Twitter folgen

Neues aus unserem Blog

WebundSEO auf Delicious folgen

Anzeigen