Google Maps mit PHP und Ajax nutzen.

10
Google Maps mit PHP und Ajax nutzen Eine kurze Einführung vom Frank Staude <[email protected]> vorgetragen beim Treffen der PHP Usergroup Hannover am 08.05.2008

description

Eine kurze Einführung. vorgetragen beim Treffen der PHP Usergroup Hannover am 08.05.2008

Transcript of Google Maps mit PHP und Ajax nutzen.

Page 1: Google Maps mit PHP und Ajax nutzen.

Google Maps mit PHP und Ajax nutzen Eine kurze Einführung

vom Frank Staude <[email protected]> vorgetragen beim Treffen der

PHP Usergroup Hannover am 08.05.2008

Page 2: Google Maps mit PHP und Ajax nutzen.

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&amp;v=2&amp;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.

Page 3: Google Maps mit PHP und Ajax nutzen.

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() { if (GBrowserIsCompatible()) {

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.

Page 4: Google Maps mit PHP und Ajax nutzen.

• 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.

Page 5: Google Maps mit PHP und Ajax nutzen.

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() {

if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(52.388466, 9.716529), 15); map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

addMarker(52.388466, 9.716529, "Gastst&auml;tte Kaiser");

}

}

Page 6: Google Maps mit PHP und Ajax nutzen.

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"/>

Page 7: Google Maps mit PHP und Ajax nutzen.

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;

Page 8: Google Maps mit PHP und Ajax nutzen.

//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() { if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById("map"));

retrieveMarkers();

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl()); 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();

Page 9: Google Maps mit PHP und Ajax nutzen.

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.addOverlay(marker);

map.closeInfoWindow(); }

}

}

request.send(null);

Page 10: Google Maps mit PHP und Ajax nutzen.

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);

map.addOverlay(marker);

}

} //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.“