Google Maps API: Koordinaten eines Markers in PHP auslesen

Transcription

Google Maps API: Koordinaten eines Markers in PHP auslesen — WebundSEO
http://www.webundseo.de/2011/02/google-maps-api-koordinaten-eines-markers-in-php-auslesen/
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
1 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
2 von 10
<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"));
18.04.2011 17:29
//Der Karte Kontrollelemente (Zoom + Richtung) zuweisen
18
map.addControl(new GLargeMapControl());
19
map.addControl(new GMapTypeControl());
20
21
//Die Karte auf Deutschland ausrichten; erst werden die Koordinaten festgelegt, dann der Zoomfaktor von 5
22
var center = new GLatLng(50.95, 10.28);
23
map.setCenter(center, 5);
24
}
25
else
26
{
27
alert("Leider ist Ihr Browser mit der Google-Maps API nicht kompatibel!");
28
}
29
30 </script>
31 </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.
3 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
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
4 von 10
<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>
<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
18.04.2011 17:29
if (GBrowserIsCompatible())
18
{
19
// Dem Div-Container mit der ID 'map' die Karte zuweisen
20
var map = new GMap2(document.getElementById("map"));
21
22
//Der Karte Kontrollelemente (Zoom + Richtung) zuweisen
23
map.addControl(new
GLargeMapControl());
24
map.addControl(new GMapTypeControl());
25
26
//Die Karte auf Deutschland ausrichten; erst werden die Koordinaten festgelegt, dann der Zoomfaktor von 5
27
28
var center = new GLatLng(50.95, 10.28);
29
map.setCenter(center, 5);
30
31
// Marker als 'verschiebbare Markierung' erstellen
32
marker = new GMarker(center, {draggable: true});
33
34
// Wenn der Marker fallengelassen wird, die Koordinaten in die INPUT-Felder speichern
35
GEvent.addListener(marker, "dragend", function()
36
{
37
document.getElementById('lat').value = marker.getPoint().lat();
38
document.getElementById('lng').value = marker.getPoint().lng();
39
});
40
41
// Marker der Karte hinzufügen
42
map.addOverlay(marker);
43
}
44
else
45
{
46
alert("Leider ist Ihr Browser mit der Google-Maps API nicht kompatibel!");
47
}
48 </script>
49 </body>
50 </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"];
5 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.
6 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)
7 von 10
18.04.2011 17:29
Neue Artikel im Magazin
8 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
9 von 10
18.04.2011 17:29
Urheberrecht bei WebundSEO · Unter Verwendung von WordPress und StudioPress · Impressum | Haftungsausschlus
10 von 10
18.04.2011 17:29

Google Maps API: Koordinaten eines Markers in PHP auslesen

Transcription

Similar documents

unter

Anfahrt Beschreibung

SharpPocketPCBuch - Paul Guckelsberger

PDF-Datei

Genealogische Forschung - Embajada de Alemania Buenos Aires

Praktisches Arbeiten mit einer PHP-Anwendung inkl. Zugriff auf die

PickPost und My Post 24

SEO

- Internetkonzepte

Link Management 145 kb

Title 財産引受に関する比較法的考察 Author(s) - HERMES-IR