1 von 10 18.04.2011 17:29 Startseite Leistungen Magazin Weitere Inhalte Intern Kontakt Themen Übersicht Grafik & Webdesign WordPress SEO Magento Performance-Optimierung Programmierung Google Maps API: Koordinaten eines Markers in PHP auslesen 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
2 von 10 18.04.2011 17:29 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 <html> <head> <title>google Maps API und PHP</title> <script src="http://maps.google.com/maps?file=api&v=2&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"));
3 von 10 18.04.2011 17:29 18 19 20 21 22 23 24 25 26 27 28 29 30 31 //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 <form action="maps.php" method="post"> 2 <input type="hidden" id="lat" name="lat" value="50.95" /> 3 <input type="hidden" id="lng" name="lng" value="10.28" /> 4 <input type="submit" value="auswahl speichern"> 5 </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.
4 von 10 18.04.2011 17:29 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 GEvent.addListener(marker, "dragend", function() 2 { 3 document.getelementbyid('lat').value = marker.getpoint().lat(); 4 document.getelementbyid('lng').value = marker.getpoint().lng(); 5 }); 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 <html> 2 <head> 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <title>google Maps API und PHP</title> <script src="http://maps.google.com/maps?file=api&v=2&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
5 von 10 18.04.2011 17:29 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 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 <?php 2 $lat = $_POST["lat"]; 3 $lng = $_POST["lng"];
6 von 10 18.04.2011 17:29 4?> 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 Keine Treffer 2 Kommentare 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.
7 von 10 18.04.2011 17:29 Danke. Super Beitrag! Gruß Tino # 16 Februar 2011 um 08:33 Uhr 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 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. Name (erforderlich) E-Mail (wird nicht veröffentlicht) (erforderlich) Website (optional)
8 von 10 18.04.2011 17:29 Neue Artikel im Magazin
9 von 10 18.04.2011 17:29 Anzeigen Leistungen: PHP Programmierung PHP Neues aus unserem Blog SEO Street Artikelverzeichnisse verfügbar WebundSEO im Jahr 2011 Geänderte Telefonnummer WebundSEO verabschiedet sich in die Sommerpause Themenrelevante News über Twitter Anzeigen
10 von 10 18.04.2011 17:29 Urheberrecht bei WebundSEO Unter Verwendung von WordPress und StudioPress Impressum Haftungsausschlus