Koordinaten eines Markers über die Google Maps API in PHP auslesen

Hinweis: Beim Relaunch meiner Webseite ist leider der komplette formatierte Code verloren gegangen. Ich habe eine aktuelle Version des Tutorials im WebundSEO Magazin veröffentlicht: Google Maps API: Koordinaten eines Markers in PHP auslesen.

Häufig wird die Google Maps API dazu verwendet, um den Benutzer einen Standort auswählen zu lassen, der dann gespeichert werden soll. Da JavaScript Daten nicht sicher bzw. nicht langzeitig speichern kann, muss der ausgewählte Punkt auf der Karte in eine Datenbank gespeichert werden – was mit PHP am einfachsten möglich ist.
Folgend wird erklärt, wie mit Hilfe der Google Maps API ein Programm erstellt werden kann, bei dem der Benutzer über einen sogenannten Marker einen Punkt auf der Karte auswählen kann, der daraufhin per Klick an ein PHP-Programm übermittelt wird. Sie benötigen die Dateien karte.html für die Karte und maps.php zum Auswerten der Benutzereingabe.

Zunächst wird also eine Karte benötigt, die über die Google Maps API generiert werden muss. Hierzu wird ein API-Key benötigt, der hier kostenlos registriert werden kann.
Nachfolgend sehen Sie ein Beispiel für das Grundgerüst der karte.html, das zunächst erstellt werden sollte. Es wird eine auf Deutschland fokussierte Karte angezeigt, die der Benutzer mit den Werkzeugen “Zoom” und “Richtung steuern kann. Vergessen Sie nicht, ‘IHR_API_KEY_HIER’ mit Ihrem API-Key zu ersetzen.

  // Ü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!");
  }

Als nächstes müssen Sie ein HTML-Formular mit versteckten INPUT-Feldern erstellen, in die später Längen- und Breitengerad des Markers gespeichert wird, den der Benutzer an eine beliebige Stelle geschoben hat. Wenn die Auswahl getroffen wurde, soll über einen Submit-Button das Formular abgeschickt werden können. Als Default-Werte, falls der Nutzer den Marker nicht verschiebt, wählen Sie am besten die gleichen Koordinaten, die auch beim Anzeigen der Karte verwendet werden. Fügen Sie also direkt unter der Zeile 8, in der die Karte geladen wird, folgenden HTML-Code ein:

Nun fehlt der Datei karte.html nur noch eine Funktion, die dem Benutzer einen Marker zur Verfügung stellt, dessen Koordinaten in die versteckten INPUT-Felder gespeichert werden. Sie benötigen also zunächst eine freiverschiebbare Markierung. Fügen Sie also folgende Codezeile unter Zeile 23 (map.setCenter(center, 5);) aus dem obrigen Beispiel ein.

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

Als nächstes sorgen Sie dafür, dass die Koordinaten in die INPUT-Felder gespeichert werden, sobald der Marker vom Benutzer verschoben wurde. Fügen Sie also folgende Zeilen direkt darunter ein:

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

Und zu guter letzt muss der Marker zur Karte hinzugefügt werden:

map.addOverlay(marker);

Nun haben Sie die Datei karte.html fertiggestellt. Alles in allem sollte sie nun wie folgt aussehen.

  // Ü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!");
  }

Nun haben Sie den größten Teil hinter sich gebracht – fehlt nur noch das PHP-Programm maps.php zum auswerten der Benutzereingaben.

Mit den erlangten Variablen haben Sie die Werte für die Breitenangabe ($lat) und die Längenangabe ($lng), die Sie nun in Ihre Datenbank speichern oder andersweitig weiterverarbeiten können.