SlideShare ist ein Scribd-Unternehmen logo
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&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.
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.
• 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() { 
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"); 
} 
}
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() { 
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();
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);
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.“

Weitere ähnliche Inhalte

Andere mochten auch

industrias tunja
 industrias tunja industrias tunja
industrias tunja
karolcaballero1
 
Instalacion de ubuntu 14.04 win7 ultimate arranque-dual_deymerhernandez
Instalacion de ubuntu 14.04 win7 ultimate arranque-dual_deymerhernandezInstalacion de ubuntu 14.04 win7 ultimate arranque-dual_deymerhernandez
Instalacion de ubuntu 14.04 win7 ultimate arranque-dual_deymerhernandez
Deymer Hernandez
 
Exposicion unidad 5 juventud adultez
Exposicion unidad 5 juventud adultezExposicion unidad 5 juventud adultez
Exposicion unidad 5 juventud adultez
CECyTE CHIAPAS
 
Alimento toxico patatas
Alimento toxico patatasAlimento toxico patatas
Alimento toxico patatas
MaryLiz Medina C
 
Kokillensysteme rlu
Kokillensysteme rluKokillensysteme rlu
Kokillensysteme rlu
Ralf Lüngen
 
Laufzeitverlängerung verhindert energie in bürgerhand
Laufzeitverlängerung verhindert energie in bürgerhandLaufzeitverlängerung verhindert energie in bürgerhand
Laufzeitverlängerung verhindert energie in bürgerhand
erhard renz
 
Heliana marcela campos reyes
Heliana  marcela campos reyesHeliana  marcela campos reyes
Heliana marcela campos reyes
Marcela Campos
 
Bürger investieren in ee
Bürger investieren in eeBürger investieren in ee
Bürger investieren in ee
erhard renz
 
Lissabon bulgariens bester leseförderer
Lissabon   bulgariens bester lesefördererLissabon   bulgariens bester leseförderer
Lissabon bulgariens bester leseförderer
Anne Gilleran
 
Thierry Müller (Amt für Energie und Verkehr, Graubünden) Ein attraktives Mobi...
Thierry Müller (Amt für Energie und Verkehr, Graubünden) Ein attraktives Mobi...Thierry Müller (Amt für Energie und Verkehr, Graubünden) Ein attraktives Mobi...
Thierry Müller (Amt für Energie und Verkehr, Graubünden) Ein attraktives Mobi...
Daxboeck_Mostviertel
 
Lebenslauf Mohamed Hashim
Lebenslauf Mohamed HashimLebenslauf Mohamed Hashim
Lebenslauf Mohamed Hashim
Mohamed Hashim
 
Evolución web
Evolución webEvolución web
Evolución web
Milena Benavides
 
Lions Club Gürbetal - Februar 2011
Lions Club Gürbetal - Februar 2011Lions Club Gürbetal - Februar 2011
Lions Club Gürbetal - Februar 2011
Atizo AG
 

Andere mochten auch (16)

industrias tunja
 industrias tunja industrias tunja
industrias tunja
 
Instalacion de ubuntu 14.04 win7 ultimate arranque-dual_deymerhernandez
Instalacion de ubuntu 14.04 win7 ultimate arranque-dual_deymerhernandezInstalacion de ubuntu 14.04 win7 ultimate arranque-dual_deymerhernandez
Instalacion de ubuntu 14.04 win7 ultimate arranque-dual_deymerhernandez
 
Exposicion unidad 5 juventud adultez
Exposicion unidad 5 juventud adultezExposicion unidad 5 juventud adultez
Exposicion unidad 5 juventud adultez
 
Alimento toxico patatas
Alimento toxico patatasAlimento toxico patatas
Alimento toxico patatas
 
Kokillensysteme rlu
Kokillensysteme rluKokillensysteme rlu
Kokillensysteme rlu
 
EN FAMILIA NOS EDUCAMOS
EN FAMILIA NOS EDUCAMOSEN FAMILIA NOS EDUCAMOS
EN FAMILIA NOS EDUCAMOS
 
Cars
CarsCars
Cars
 
Laufzeitverlängerung verhindert energie in bürgerhand
Laufzeitverlängerung verhindert energie in bürgerhandLaufzeitverlängerung verhindert energie in bürgerhand
Laufzeitverlängerung verhindert energie in bürgerhand
 
Heliana marcela campos reyes
Heliana  marcela campos reyesHeliana  marcela campos reyes
Heliana marcela campos reyes
 
Bürger investieren in ee
Bürger investieren in eeBürger investieren in ee
Bürger investieren in ee
 
E marketing austria.info-de_2013
E marketing austria.info-de_2013E marketing austria.info-de_2013
E marketing austria.info-de_2013
 
Lissabon bulgariens bester leseförderer
Lissabon   bulgariens bester lesefördererLissabon   bulgariens bester leseförderer
Lissabon bulgariens bester leseförderer
 
Thierry Müller (Amt für Energie und Verkehr, Graubünden) Ein attraktives Mobi...
Thierry Müller (Amt für Energie und Verkehr, Graubünden) Ein attraktives Mobi...Thierry Müller (Amt für Energie und Verkehr, Graubünden) Ein attraktives Mobi...
Thierry Müller (Amt für Energie und Verkehr, Graubünden) Ein attraktives Mobi...
 
Lebenslauf Mohamed Hashim
Lebenslauf Mohamed HashimLebenslauf Mohamed Hashim
Lebenslauf Mohamed Hashim
 
Evolución web
Evolución webEvolución web
Evolución web
 
Lions Club Gürbetal - Februar 2011
Lions Club Gürbetal - Februar 2011Lions Club Gürbetal - Februar 2011
Lions Club Gürbetal - Februar 2011
 

Ähnlich wie Google Maps mit PHP und Ajax nutzen.

.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
Manfred Steyer
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2
Manfred Steyer
 
Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...
Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...
Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...
e-dialog GmbH
 
Jpgraph - eine Einführung
Jpgraph - eine EinführungJpgraph - eine Einführung
Jpgraph - eine Einführung
frankstaude
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Sven Haiges
 
Modern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_scriptModern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_script
Manfred Steyer
 
Dynamische Webprogrammierung mit der GoogleMaps API
Dynamische Webprogrammierung mit der GoogleMaps APIDynamische Webprogrammierung mit der GoogleMaps API
Dynamische Webprogrammierung mit der GoogleMaps API
Christian Kehl
 
HTML5 abwärtskompatibel - Gerätevielfalt & Zugänglichkeit
HTML5 abwärtskompatibel - Gerätevielfalt & ZugänglichkeitHTML5 abwärtskompatibel - Gerätevielfalt & Zugänglichkeit
HTML5 abwärtskompatibel - Gerätevielfalt & Zugänglichkeit
Jonathan Weiß
 
DevOpsCon - Verteilte Entwicklung in Go
DevOpsCon - Verteilte Entwicklung in GoDevOpsCon - Verteilte Entwicklung in Go
DevOpsCon - Verteilte Entwicklung in Go
Frank Müller
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Sebastian Springer
 
Einsteiger Workshop
Einsteiger WorkshopEinsteiger Workshop
Einsteiger Workshop
FunThomas424242
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
Manfred Steyer
 
PHP, AJAX und XUL im Intranet
PHP, AJAX und XUL im IntranetPHP, AJAX und XUL im Intranet
PHP, AJAX und XUL im Intranet
Markus Wolff
 
Dynamische Websites mit XML
Dynamische Websites mit XMLDynamische Websites mit XML
Dynamische Websites mit XML
Stephan Schmidt
 
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan EngelApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
OPITZ CONSULTING Deutschland
 
Google Analytics Konferenz 2012: Holger Tempel, webalytics: Advanced Google A...
Google Analytics Konferenz 2012: Holger Tempel, webalytics: Advanced Google A...Google Analytics Konferenz 2012: Holger Tempel, webalytics: Advanced Google A...
Google Analytics Konferenz 2012: Holger Tempel, webalytics: Advanced Google A...
e-dialog GmbH
 
Spark vs. PL/SQL
Spark vs. PL/SQLSpark vs. PL/SQL
Open icf (open identity connector framework) @ forgerock deutsch
Open icf (open identity connector framework) @ forgerock   deutschOpen icf (open identity connector framework) @ forgerock   deutsch
Open icf (open identity connector framework) @ forgerock deutsch
Hanns Nolan
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
Yvette Teiken
 
ARIA
ARIAARIA

Ähnlich wie Google Maps mit PHP und Ajax nutzen. (20)

.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2
 
Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...
Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...
Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...
 
Jpgraph - eine Einführung
Jpgraph - eine EinführungJpgraph - eine Einführung
Jpgraph - eine Einführung
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
Modern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_scriptModern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_script
 
Dynamische Webprogrammierung mit der GoogleMaps API
Dynamische Webprogrammierung mit der GoogleMaps APIDynamische Webprogrammierung mit der GoogleMaps API
Dynamische Webprogrammierung mit der GoogleMaps API
 
HTML5 abwärtskompatibel - Gerätevielfalt & Zugänglichkeit
HTML5 abwärtskompatibel - Gerätevielfalt & ZugänglichkeitHTML5 abwärtskompatibel - Gerätevielfalt & Zugänglichkeit
HTML5 abwärtskompatibel - Gerätevielfalt & Zugänglichkeit
 
DevOpsCon - Verteilte Entwicklung in Go
DevOpsCon - Verteilte Entwicklung in GoDevOpsCon - Verteilte Entwicklung in Go
DevOpsCon - Verteilte Entwicklung in Go
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
 
Einsteiger Workshop
Einsteiger WorkshopEinsteiger Workshop
Einsteiger Workshop
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
 
PHP, AJAX und XUL im Intranet
PHP, AJAX und XUL im IntranetPHP, AJAX und XUL im Intranet
PHP, AJAX und XUL im Intranet
 
Dynamische Websites mit XML
Dynamische Websites mit XMLDynamische Websites mit XML
Dynamische Websites mit XML
 
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan EngelApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
 
Google Analytics Konferenz 2012: Holger Tempel, webalytics: Advanced Google A...
Google Analytics Konferenz 2012: Holger Tempel, webalytics: Advanced Google A...Google Analytics Konferenz 2012: Holger Tempel, webalytics: Advanced Google A...
Google Analytics Konferenz 2012: Holger Tempel, webalytics: Advanced Google A...
 
Spark vs. PL/SQL
Spark vs. PL/SQLSpark vs. PL/SQL
Spark vs. PL/SQL
 
Open icf (open identity connector framework) @ forgerock deutsch
Open icf (open identity connector framework) @ forgerock   deutschOpen icf (open identity connector framework) @ forgerock   deutsch
Open icf (open identity connector framework) @ forgerock deutsch
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
 
ARIA
ARIAARIA
ARIA
 

Mehr von frankstaude

State of TV – Vortragsaufzeichnung, aktueller Stand und Ausblick
State of TV – Vortragsaufzeichnung, aktueller Stand und AusblickState of TV – Vortragsaufzeichnung, aktueller Stand und Ausblick
State of TV – Vortragsaufzeichnung, aktueller Stand und Ausblick
frankstaude
 
Automatisierung in Zeiten von Social Media, Messenger-Diensten und Bots
Automatisierung in Zeiten von Social Media, Messenger-Diensten und BotsAutomatisierung in Zeiten von Social Media, Messenger-Diensten und Bots
Automatisierung in Zeiten von Social Media, Messenger-Diensten und Bots
frankstaude
 
CPT UI und ACF - Wie werden Inhalte sinnvoll strukturiert?
CPT UI und ACF - Wie werden Inhalte sinnvoll strukturiert?CPT UI und ACF - Wie werden Inhalte sinnvoll strukturiert?
CPT UI und ACF - Wie werden Inhalte sinnvoll strukturiert?
frankstaude
 
TablePress - Warum und welche Erweiterungen gibt es?
TablePress - Warum und welche Erweiterungen gibt es?TablePress - Warum und welche Erweiterungen gibt es?
TablePress - Warum und welche Erweiterungen gibt es?
frankstaude
 
Gamifizierung mit WordPress – Eine Einführung und Einsatz in der Schule
Gamifizierung mit WordPress – Eine Einführung und Einsatz in der SchuleGamifizierung mit WordPress – Eine Einführung und Einsatz in der Schule
Gamifizierung mit WordPress – Eine Einführung und Einsatz in der Schule
frankstaude
 
Erneute Bestellung in WooCommerce
Erneute Bestellung in WooCommerceErneute Bestellung in WooCommerce
Erneute Bestellung in WooCommerce
frankstaude
 
Gamification mit WordPress
Gamification mit WordPressGamification mit WordPress
Gamification mit WordPress
frankstaude
 
Mobile Apps mit WordPress
Mobile Apps mit WordPressMobile Apps mit WordPress
Mobile Apps mit WordPress
frankstaude
 
Suchst du noch - Oder findest du schon?
Suchst du noch - Oder findest du schon?Suchst du noch - Oder findest du schon?
Suchst du noch - Oder findest du schon?
frankstaude
 
State of TV - Stand der Vortragsaufzeichnung 11/2017
State of TV - Stand der Vortragsaufzeichnung 11/2017State of TV - Stand der Vortragsaufzeichnung 11/2017
State of TV - Stand der Vortragsaufzeichnung 11/2017
frankstaude
 
Suchst du noch - Oder findest du schon?
Suchst du noch - Oder findest du schon?Suchst du noch - Oder findest du schon?
Suchst du noch - Oder findest du schon?
frankstaude
 
Suchst du noch? Oder findest du schon?
Suchst du noch? Oder findest du schon?Suchst du noch? Oder findest du schon?
Suchst du noch? Oder findest du schon?
frankstaude
 
Themes – Wieso, Weshalb, Warum!?
Themes – Wieso, Weshalb, Warum!?Themes – Wieso, Weshalb, Warum!?
Themes – Wieso, Weshalb, Warum!?
frankstaude
 
Eine WordPress Meetup Webseite auf Autopilot
Eine WordPress Meetup Webseite auf AutopilotEine WordPress Meetup Webseite auf Autopilot
Eine WordPress Meetup Webseite auf Autopilot
frankstaude
 
Vorträge aufzeichnen ohne Nachbearbeitung
Vorträge aufzeichnen ohne NachbearbeitungVorträge aufzeichnen ohne Nachbearbeitung
Vorträge aufzeichnen ohne Nachbearbeitung
frankstaude
 
Nürnberg WordPress Meetup - Custom Post Types mit PODS.io
Nürnberg WordPress Meetup - Custom Post Types mit PODS.ioNürnberg WordPress Meetup - Custom Post Types mit PODS.io
Nürnberg WordPress Meetup - Custom Post Types mit PODS.io
frankstaude
 
WordPress - eigene Plugins erstellen
WordPress - eigene Plugins erstellenWordPress - eigene Plugins erstellen
WordPress - eigene Plugins erstellen
frankstaude
 
Custom Post Types mit PODS.io
Custom Post Types mit PODS.ioCustom Post Types mit PODS.io
Custom Post Types mit PODS.io
frankstaude
 
Suchst du noch? Oder findest du schon?
Suchst du noch? Oder findest du schon?Suchst du noch? Oder findest du schon?
Suchst du noch? Oder findest du schon?
frankstaude
 
Pressmatic
PressmaticPressmatic
Pressmatic
frankstaude
 

Mehr von frankstaude (20)

State of TV – Vortragsaufzeichnung, aktueller Stand und Ausblick
State of TV – Vortragsaufzeichnung, aktueller Stand und AusblickState of TV – Vortragsaufzeichnung, aktueller Stand und Ausblick
State of TV – Vortragsaufzeichnung, aktueller Stand und Ausblick
 
Automatisierung in Zeiten von Social Media, Messenger-Diensten und Bots
Automatisierung in Zeiten von Social Media, Messenger-Diensten und BotsAutomatisierung in Zeiten von Social Media, Messenger-Diensten und Bots
Automatisierung in Zeiten von Social Media, Messenger-Diensten und Bots
 
CPT UI und ACF - Wie werden Inhalte sinnvoll strukturiert?
CPT UI und ACF - Wie werden Inhalte sinnvoll strukturiert?CPT UI und ACF - Wie werden Inhalte sinnvoll strukturiert?
CPT UI und ACF - Wie werden Inhalte sinnvoll strukturiert?
 
TablePress - Warum und welche Erweiterungen gibt es?
TablePress - Warum und welche Erweiterungen gibt es?TablePress - Warum und welche Erweiterungen gibt es?
TablePress - Warum und welche Erweiterungen gibt es?
 
Gamifizierung mit WordPress – Eine Einführung und Einsatz in der Schule
Gamifizierung mit WordPress – Eine Einführung und Einsatz in der SchuleGamifizierung mit WordPress – Eine Einführung und Einsatz in der Schule
Gamifizierung mit WordPress – Eine Einführung und Einsatz in der Schule
 
Erneute Bestellung in WooCommerce
Erneute Bestellung in WooCommerceErneute Bestellung in WooCommerce
Erneute Bestellung in WooCommerce
 
Gamification mit WordPress
Gamification mit WordPressGamification mit WordPress
Gamification mit WordPress
 
Mobile Apps mit WordPress
Mobile Apps mit WordPressMobile Apps mit WordPress
Mobile Apps mit WordPress
 
Suchst du noch - Oder findest du schon?
Suchst du noch - Oder findest du schon?Suchst du noch - Oder findest du schon?
Suchst du noch - Oder findest du schon?
 
State of TV - Stand der Vortragsaufzeichnung 11/2017
State of TV - Stand der Vortragsaufzeichnung 11/2017State of TV - Stand der Vortragsaufzeichnung 11/2017
State of TV - Stand der Vortragsaufzeichnung 11/2017
 
Suchst du noch - Oder findest du schon?
Suchst du noch - Oder findest du schon?Suchst du noch - Oder findest du schon?
Suchst du noch - Oder findest du schon?
 
Suchst du noch? Oder findest du schon?
Suchst du noch? Oder findest du schon?Suchst du noch? Oder findest du schon?
Suchst du noch? Oder findest du schon?
 
Themes – Wieso, Weshalb, Warum!?
Themes – Wieso, Weshalb, Warum!?Themes – Wieso, Weshalb, Warum!?
Themes – Wieso, Weshalb, Warum!?
 
Eine WordPress Meetup Webseite auf Autopilot
Eine WordPress Meetup Webseite auf AutopilotEine WordPress Meetup Webseite auf Autopilot
Eine WordPress Meetup Webseite auf Autopilot
 
Vorträge aufzeichnen ohne Nachbearbeitung
Vorträge aufzeichnen ohne NachbearbeitungVorträge aufzeichnen ohne Nachbearbeitung
Vorträge aufzeichnen ohne Nachbearbeitung
 
Nürnberg WordPress Meetup - Custom Post Types mit PODS.io
Nürnberg WordPress Meetup - Custom Post Types mit PODS.ioNürnberg WordPress Meetup - Custom Post Types mit PODS.io
Nürnberg WordPress Meetup - Custom Post Types mit PODS.io
 
WordPress - eigene Plugins erstellen
WordPress - eigene Plugins erstellenWordPress - eigene Plugins erstellen
WordPress - eigene Plugins erstellen
 
Custom Post Types mit PODS.io
Custom Post Types mit PODS.ioCustom Post Types mit PODS.io
Custom Post Types mit PODS.io
 
Suchst du noch? Oder findest du schon?
Suchst du noch? Oder findest du schon?Suchst du noch? Oder findest du schon?
Suchst du noch? Oder findest du schon?
 
Pressmatic
PressmaticPressmatic
Pressmatic
 

Google Maps mit PHP und Ajax nutzen.

  • 1. 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
  • 2. 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.
  • 3. 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.
  • 4. • 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.
  • 5. 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"); } }
  • 6. 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"/>
  • 7. 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;
  • 8. //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();
  • 9. 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);
  • 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 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.“