Google Maps mit PHP und Ajax nutzen

download Google Maps mit PHP und Ajax nutzen

of 10

  • date post

    01-Jul-2015
  • Category

    Internet

  • view

    128
  • download

    1

Embed Size (px)

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

  • 1. Google Maps mit PHP und Ajax nutzenEine kurze Einfhrungvom Frank Staude vorgetragen beim Treffen derPHP Usergroup Hannoveram 08.05.2008

2. Bevor wir mit Google-Maps loslegen knnen, bentigen wir einen API-Key. Den bekommt man aufder Seite http://www.google.com/apis/maps/signup.html nach dem man sich mit denNutzungsbedingungen einverstanden erklrt hat. Auerdem bentigt man einen Google Account.Anschlieend bekommt man seinen Schssel und ein einfache Beispiel Seite.Google Maps JavaScript API Example//

Das erzeugt eine einfache Karte, mit der man allerdings noch nichts anfangen kann. 3. Als erstes werden wir nun mal ausgeben, wo wir uns heute Abend treffen.Als erstes machen wir den Div-Container grer, in den die Karte hineingeladen wird.

Nun bentigen wir noch die Steuerelemente um in der Karte zu navigieren und um die Ansichtumschalten zu knnen. Dazu ergnzen wir den Javascipt Block folgendermaen.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. Anschlieend mit addControl diebeiden Navigationselemente. Es gibt 5 verschiedene Navigationselemente die verwendet werdenknnen. 4. GLargeMapControl() Dies ist das groe Steuerelement zum Verschieben und Vergrernder 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 Schaltflchen zum ndern des Vergrerungsfaktors. GMapTypeControl(). Umschalten der Ansicht zwischen Karten, Satelliten- undHybriddarstellung.Als nchstes soll aber auch ein Marker auf der Karte gesetzt werden, denn wir wollen ja nicht ratenwo der anvisierte Punkte sich auf der Karte befindet.Und wenn man den Marker anklickt erscheint ein Beschreibungstext. 5. Der Javascript Block sieht nun folgendermaen 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ätte Kaiser");}} 6. Wir wren nicht die PHPUG Hannover, wenn nicht auch das Thema GPS/Geocaching vorkommenwrde. Also nehmen wir als richtige Anwendung eine Karte wo jeder per Klick einen neuen Cachein die Karte eintragen kann.Und nach speichern erscheint ein neuer Marker auf der Karte. Speichern schickt die Daten an denWebserver, dort werden diese gespeichert, so dass auch beim neu laden der Karte die bereitseingetragenen Geocaches ausgegeben werden. Der Einfachheit halber werden die Daten in einerXML Datei gespeichert. Der Aufbau der XML Datei ist: 7. Dieses Beispiel ist aus dem recht guten Buch Google Maps Anwendungen mit PHP und Ajax vonMichael Purvis, Jeffrey Sambells und Cameron Turner. Mitp Verlag, ISBN: 978-3-8266-1760-7 undnatrlich auch in der TIB zum ausleihen. Beispiel Kapitel und auch die Codebeispiele gibt es unter:http://www.mitp.de/1760Ich fand dieses Beispiel aber so passend fr unsere PHPUG, dass ich mich entschieden habe es zuverwenden. Die beiden PHP Scripte sind.Zum Speichern:XML;?>Und zum LesenUnd 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 ausfhren, wenn das Fenster geschlossen ist//und der Klick direkt auf der Karte erfolgteif(!overlay) {//Ein DOM-Element im HTML-Formular erzeugenvar inputForm = document.createElement("form");inputForm.setAttribute("action","");inputForm.onsubmit = function() {storeMarker(); return false;}//Lnge und Breite des angeklickten Punkts ermittelnvar lng = latlng.lng();var lat = latlng.lat(); 9. inputForm.innerHTML = ''+ 'Neuer Marker'+ 'Gefunden'+ ''+ 'Versteckt'+ ''+ ''+ ''+ ''+ '';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 Serverrequest.open('GET', 'storeMarker.php' + getVars, true);request.onreadystatechange = function() {if (request.readyState == 4) {//Anforderung abgeschlossenvar xmlDoc = request.responseXML;//root-Dokumentelement (response) bernehmenvar responseNode = xmlDoc.documentElement;//type-Attribut des Knotens bernehmenvar type = responseNode.getAttribute("type");//Inhalt von responseNode bernehmenvar content = responseNode.firstChild.nodeValue;//Prfung: Fehler oder Erfolg?if(type!='success') {alert(content);} else {//Neuen Marker erzeugen und Info-Fenster//hinzufgenvar latlng = new GLatLng(parseFloat(lat),parseFloat(lng));var marker = createMarker(latlng, content);map.addOverlay(marker);map.closeInfoWindow();}}}request.send(null); 10. 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 werdenrequest.open('GET', 'retrieveMarkers.php', true);//request mitteilen, was bei Statusnderung geschehen sollrequest.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 prfen, damit MSIE keinen Fehler bei//parseFloat eines Nullwerts verursachtif(lng && lat) {var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));var html = '

Gefunden '+ markers[i].getAttribute("found")+ '
Versteckt '+ markers[i].getAttribute("left")+ '

';var marker = createMarker(latlng, html);map.addOverlay(marker);}} //for} //if} //functionrequest.send(null);}Und wer es direkt ausprobieren mchte kann das Beispiel unter http://frank-staude.de/googlemaps/index.php aufrufen.Die wichtigste Infoquelle ist natrlich die Dokumentation der Api unterhttp://code.google.com/apis/maps/documentation/index.html und ebenfalls interessant ist dasMaps API Blog unter http://googlemapsapi.blogspot.com/Und wer nicht alles selber Coden mchte sollte sich unter http://gmapper.ajax-info.de/ mal dieGMapper Klasse ansehen. Gmapper ist eine PHP Klasse, die den Einsatz von Google Maps inWebsites stark vereinfacht. Gmapper bietet erweiterte Funktionen wie Polylines, Zoom to bounds,XML Support, Fahrtrichtungen und vieles mehr.