Google Maps mit PHP und Ajax nutzen.

Google Maps mit PHP und Ajax nutzen
Eine kurze Einführung
vom Frank Staude <staude@trilos.de>
vorgetragen beim Treffen der
PHP Usergroup Hannover
am 08.05.2008

Bevor wir mit Google-Maps loslegen können, benötigen wir einen API-Key. Den bekommt man auf
der Seite http://www.google.com/apis/maps/signup.html nach dem man sich mit den
Nutzungsbedingungen einverstanden erklärt hat. Außerdem benötigt man einen Google Account.
Anschließend bekommt man seinen Schüssel und ein einfache Beispiel Seite.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=DEIN_KEY"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Das erzeugt eine einfache Karte, mit der man allerdings noch nichts anfangen kann.

Als erstes werden wir nun mal ausgeben, wo wir uns heute Abend treffen.
Als erstes machen wir den Div-Container größer, in den die Karte hineingeladen wird.
<div id="map" style="width: 800px; height: 600px"></div>
Nun benötigen wir noch die Steuerelemente um in der Karte zu navigieren und um die Ansicht
umschalten zu können. Dazu ergänzen wir den Javascipt Block folgendermaßen.
function load() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.388466, 9.716529), 15);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
}
}
Mit setCenter wird die Kartenmitte und der Zoomfaktor festgelegt. Anschließend mit addControl die
beiden Navigationselemente. Es gibt 5 verschiedene Navigationselemente die verwendet werden
können.

• GLargeMapControl() Dies ist das „große“ Steuerelement zum Verschieben und Vergrößern
der Karte wie im Beispiel und auch auf maps.google.com verwendet.
• GSmallMapControl(). Ein kleineres Steuerelement zur Verwendung in kleinen Karten.
• GScaleControl(). Zeigt die aktuelle Skalierung der Karte mit Kilometerangaben an.
• GSmallZoomControl(). Zwei einfache Schaltflächen zum ändern des Vergrößerungsfaktors.
• GMapTypeControl(). Umschalten der Ansicht zwischen Karten, Satelliten- und
Hybriddarstellung.
Als nächstes soll aber auch ein Marker auf der Karte gesetzt werden, denn wir wollen ja nicht raten
wo der anvisierte Punkte sich auf der Karte befindet.
Und wenn man den Marker anklickt erscheint ein Beschreibungstext.

Der Javascript Block sieht nun folgendermaßen aus.
var map;
function addMarker(lat, lang, desc)
{
var marker = new GMarker(new GLatLng(lat, lang));
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml (desc)}
);
map.addOverlay(marker);
}
function load() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.388466, 9.716529), 15);
map.addControl(new GLargeMapControl());
addMarker(52.388466, 9.716529, "Gaststätte Kaiser");
}
}

Wir wären nicht die PHPUG Hannover, wenn nicht auch das Thema GPS/Geocaching vorkommen
würde. Also nehmen wir als „richtige“ Anwendung eine Karte wo jeder per Klick einen neuen Cache
in die Karte eintragen kann.
Und nach „speichern“ erscheint ein neuer Marker auf der Karte. Speichern schickt die Daten an den
Webserver, dort werden diese gespeichert, so dass auch beim neu laden der Karte die bereits
eingetragenen „Geocaches“ ausgegeben werden. Der Einfachheit halber werden die Daten in einer
XML Datei gespeichert. Der Aufbau der XML Datei ist:
<marker lat="52.3884610455" lng="9.71569061279" found="nix" left="Bananen"/>

Dieses Beispiel ist aus dem recht guten Buch „Google Maps Anwendungen mit PHP und Ajax“ von
Michael Purvis, Jeffrey Sambells und Cameron Turner. Mitp Verlag, ISBN: 978-3-8266-1760-7 und
natürlich auch in der TIB zum ausleihen. Beispiel Kapitel und auch die Codebeispiele gibt es unter:
http://www.mitp.de/1760
Ich fand dieses Beispiel aber so passend für unsere PHPUG, dass ich mich entschieden habe es zu
verwenden. Die beiden PHP Scripte sind.
Zum Speichern:
<?php
header('Content-Type: text/xml;charset=UTF-8');
$lat = (float)$_GET['lat'];
$lng = (float)$_GET['lng'];
$found = htmlspecialchars(strip_tags($_GET['found']));
$left = htmlspecialchars(strip_tags($_GET['left']));
//XML-Knoten erzeugen
$marker = <<<MARKER
<marker lat="$lat" lng="$lng" found="$found" left="$left"/>n
MARKER;

//data.xml öffnen und erweitern
$f=@fopen('data.xml', 'a+');
if(!$f) die('<?xml version="1.0"?>
<response type="error"><![CDATA[Konnte Datei data.xml nicht laden]]></response>');
//Knoten hinzufügen
$w=@fwrite($f, $marker);
if(!$w) die('<?xml version="1.0"?>
<response type="error">![CDATA[Konnte nicht in Datei data.xml schreiben]]></response>');
@fclose($f);
//Antwort zurückgeben
$newMarkerContent = "<div><b>Gefunden </b>$found</div>
<div><b>Versteckt </b>$left</div>";
echo <<<XML
<?xml version="1.0"?>
<response type="success"><![CDATA[$newMarkerContent]]></response>
XML;
?>
Und zum Lesen
<?php
header('Content-Type: text/xml;charset=UTF-8');
$markers = file_get_contents('data.xml');
echo <<<XML
<markers>$markers</markers>
XML;
?>
Und der JavascriptCode dazu:
var centerLatitude = 52.388466;
var centerLongitude = 9.716529;
var startZoom = 15;
var map;
function init() {
map = new GMap2(document.getElementById("map"));
retrieveMarkers();
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(centerLatitude,centerLongitude), startZoom);
GEvent.addListener(map, "click", function(overlay, latlng) {
//Nur dann Klick ausführen, wenn das Fenster geschlossen ist
//und der Klick direkt auf der Karte erfolgte
if(!overlay) {
//Ein DOM-Element im HTML-Formular erzeugen
var inputForm = document.createElement("form");
inputForm.setAttribute("action","");
inputForm.onsubmit = function() {storeMarker(); return false;}
//Länge und Breite des angeklickten Punkts ermitteln
var lng = latlng.lng();
var lat = latlng.lat();

inputForm.innerHTML = '<fieldset style="width:150px;">'
+ '<legend>Neuer Marker</legend>'
+ '<label for="found">Gefunden</label>'
+ '<input type="text" id="found"
style="width:100%;" />'
+ '<label for="left">Versteckt</label>'
+ '<input type="text" id="left"
style="width:100%;" />'
+ '<input type="submit" value="Speichern" />'
+ '<input type="hidden" id="longitude" value="'
+ lng + '"/>'
+ '<input type="hidden" id="latitude" value="'
+ lat + '"/>'
+ '</fieldset>';
map.openInfoWindow (latlng,inputForm);
}
});
}
}
window.onload = init;
window.onunload = GUnload;
function storeMarker(){
var lng = document.getElementById("longitude").value;
var lat = document.getElementById("latitude").value;
var getVars = "?found="
+ document.getElementById("found").value
+ "&left=" + document.getElementById("left").value
+ "&lng=" + lng
+ "&lat=" + lat ;
var request = GXmlHttp.create();
//Anforderung an storeMarker.php auf dem Server
request.open('GET', 'storeMarker.php' + getVars, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
//Anforderung abgeschlossen
var xmlDoc = request.responseXML;
//root-Dokumentelement (response) übernehmen
var responseNode = xmlDoc.documentElement;
//type-Attribut des Knotens übernehmen
var type = responseNode.getAttribute("type");
//Inhalt von responseNode übernehmen
var content = responseNode.firstChild.nodeValue;
//Prüfung: Fehler oder Erfolg?
if(type!='success') {alert(content);
} else {
//Neuen Marker erzeugen und Info-Fenster
//hinzufügen
var latlng = new GLatLng(parseFloat(lat),
parseFloat(lng));
var marker = createMarker(latlng, content);
map.closeInfoWindow();
}
}
}
request.send(null);

return false;
}
function createMarker(latlng, html) {
var marker = new GMarker(latlng);
GEvent.addListener(marker, 'click', function() {
var markerHTML = html;
marker.openInfoWindowHtml(markerHTML);
});
return marker;
}
function retrieveMarkers() {
var request = GXmlHttp.create();
//request mitteilen, woher Daten übernommen werden
request.open('GET', 'retrieveMarkers.php', true);
//request mitteilen, was bei Statusänderung geschehen soll
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var lng = markers[i].getAttribute("lng");
var lat = markers[i].getAttribute("lat");
//lng und lat prüfen, damit MSIE keinen Fehler bei
//parseFloat eines Nullwerts verursacht
if(lng && lat) {
var latlng = new GLatLng(parseFloat(lat),
parseFloat(lng));
var html = '<div><b>Gefunden</b> '
+ markers[i].getAttribute("found")
+ '</div><div><b>Versteckt</b> '
+ markers[i].getAttribute("left")
+ '</div>';
var marker = createMarker(latlng, html);
}
} //for
} //if
} //function
request.send(null);
}
Und wer es direkt ausprobieren möchte kann das Beispiel unter http://frank-staude.
de/googlemaps/index.php aufrufen.
Die wichtigste Infoquelle ist natürlich die Dokumentation der Api unter
http://code.google.com/apis/maps/documentation/index.html und ebenfalls interessant ist das
Maps API Blog unter http://googlemapsapi.blogspot.com/
Und wer nicht alles selber Coden möchte sollte sich unter http://gmapper.ajax-info.de/ mal die
GMapper Klasse ansehen. „Gmapper ist eine PHP Klasse, die den Einsatz von Google Maps in
Websites stark vereinfacht. Gmapper bietet erweiterte Funktionen wie Polylines, Zoom to bounds,
XML Support, Fahrtrichtungen und vieles mehr.“

Google Maps mit PHP und Ajax nutzen.

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie Google Maps mit PHP und Ajax nutzen.

Mehr von frankstaude

Google Maps mit PHP und Ajax nutzen.