Google Maps mit PHP

Kein Beitragsbild

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Mit Google Maps lassen sich ja bekanntlich eindrucksvolle, steuerbare Straßenkarten auf der eigen Internetpräsenz darstellen. Wer Google Maps jedoch auf seine Website einbinden will, muss sich erst mal mit der API auseinandersetzen. Folgende PHP-Anwendung erleichtert die Einbindung.

Ein weiterer Vorteil der Anwendung ist, dass neben der JavaScript-basierenden Version von Google Maps (siehe Artikel Anfahrtsskizzen mit Google Maps) auch eine statische Karte (eine einfache GIF-Grafik) eingebunden wird, die dargestellt wird, wenn JavaScript nicht aktiviert ist.

Muster im neuen Fenster

Die Anwendung besteht aus zwei PHP-Funktionen, die am Beginn des PHP-/HTML-Dokuments eingebunden werden müssen. Die erste Funktion google_daten($bez, $adresse, $masse, $sonstiges) dient der Übergabe der Adresse und der Eigenschaften – wie Maße der Karte und Zoomfaktor – sowie der Übermittlung der Adresse an Google und Auswertung der von Google gesendeten XML-Datei.

<?

function google_daten($bez, $adresse, $masse, $sonstiges) { global $key; global $b; global $h; global $zoom; global $bezeichnung; global $eigenschaften; global $position; global $land; global $stadt; global $strasse; global $plz;

$key = "Hier API-Key eingeben";

Sie müssen der Variablen $key Ihren API-Key zuweisen. Um Google Maps nutzen zu können, müssen Sie sich einen solchen Schlüssel bei Google Maps besorgen (siehe Artikel Google Maps API nutzen). Der Schlüssel ist für eine bestimmte Domain gültig und kann, insofern Sie einen Google-Acount haben, kostenlos generiert werden. Weitere Änderungen an der Funktion sind nicht nötig.

Der Funktion werden vier Variablen übergeben:

$bez ist die Bezeichnung der zu darstellenden Adresse. Hier kann auch eine leere Zeichenkette übergeben werden, da die Bezeichnung nur im von Google Maps dargestellten Infofenster zusammen mit der Adresse dargestellt wird.

$adresse ist die darzustellende Adresse. Sie kann formlos angegeben werden. In der Regel reicht die Angabe einer Straße (mit oder ohne Hausnummer) sowie die Stadt.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Der Variablen $masse werden die Breite und Höhe sowie der Zoomfaktor der darzustellenden Karte zugewiesen. Beide Angaben müssen durch Komma und Leerzeichen getrennt werden.

Über die Variable $sonstiges können Sie zusätzliche Elemente auf Ihrer Karte darstellen lassen:

Über die Zeichenkette fenster wird ein Infofenster dargestellt (siehe Artikel Google Maps mit eigenem Infofenster), in dem die Adresse und (falls angegeben) die Bezeichung angezeigt werden,

über steuerung wird eine Navigation dargestellt, mit der Sie sich in der Karte bewegen können,

über kartentyp wird ein Menü dargestellt, mit dem Sie zwischen verschiedenen Kartentypen wechseln können,

über uebersicht wird eine kleine Übersichtskarte dargestellt, die einen größeren Kartenausschnitt anzeigt,

Die Angaben müssen durch Komma und Leerzeichen getrennt in einer Zeichenkette an die Funktion übergeben werden. Im Folgenden werden die einzelnen übergebenen Werte für das weitere Vorgehen verarbeitet:

  $bezeichnung = $bez;

$adresse = rawurlencode($adresse);

$masse = explode(", ", $masse); $b = $masse[0]; $h = $masse[1]; $zoom = $masse[2];

$eigenschaften = explode(", ", $sonstiges);

Im Nächsten Schritt werden die Adresse zusammen mit dem API-Key an Google übergeben. Google sendet eine XML-Datei, die eine Reihe von Angaben zu der Adresse enthalten, z. B. die Postleitzahl, das Bundesland und die Koordinaten der Adresse. Die Koordinaten sind entscheidend, da Google die Adresse aufgrund dieser Daten anzeigt:

  $geo = implode(file("http://maps.google.com/maps/geo?q=".$adresse."&output=xml&hl=de&key=".$key));  $geo = utf8_encode($geo);

$xml = xml_parser_create(); xml_parse_into_struct($xml, $geo, $ausgabe); xml_parser_free($xml);

foreach($ausgabe as $a) { if($a["tag"] == "COORDINATES") $position = $a["value"]; if($a["tag"] == "ADMINISTRATIVEAREANAME") $land = $a["value"]; if($a["tag"] == "LOCALITYNAME") $stadt = $a["value"]; if($a["tag"] == "POSTALCODENUMBER") $plz = $a["value"]; if($a["tag"] == "ADDRESSLINE") $strasse = $a["value"]; if($strasse == "" && $a["tag"] == "THOROUGHFARENAME") $strasse = $a["value"]; }

$position = explode(",", $position); $position = $position[1].",".$position[0];

}

Die XML-Datei wird zerlegt. Die gebrauchten Daten werden extrahiert und in Variablen gespeichert. Aus der XML-Datei entnehmen wir die Koordinaten ($position), das Bundesland ($land), die Stadt ($stadt), die Postleitzahl ($plz) und die Straße ($strasse). Falls keine Straße angegeben wird (falls man als Adresse z. B. einfach »Kölner Dom, Köln« angibt), wird die nächste Straße in der Umgebung gewählt.

Da die Koordinaten in der XML-Datei anders dargestellt werden, als sie für die Kartendarstellung gebraucht werden, wird die Reihenfolge entsprechend geändert. Damit ist die erste der beiden PHP-Funktionen fertig. Die zweite Funktion dient der eigentlichen Darstellung der Daten. Es werden zwei Variablen mit HTML-Code gefüllt:

function google_maps($wert) {

global $key; global $b; global $h; global $zoom; global $bezeichnung; global $eigenschaften; global $position; global $land; global $stadt; global $strasse; global $plz;

$script = "<script src="http://maps.google.com/maps?file=api&v=2.x&hl=de&key=".$key."" type="text/javascript"></script>rn"; $script .= "<script type="text/javascript">rnrn"; $script .= "function zeigekarte(bezeichnung, strasse, plz, ort, land) {rn"; $script .= "tif(GBrowserIsCompatible()) {rn"; $script .= "ttvar karte = new GMap2(document.getElementById("karte"));rn"; $script .= "ttvar point = new GLatLng(".$position.");rn"; $script .= "ttkarte.setCenter(point, ".$zoom.");rn"; $script .= "ttvar marker = new GMarker(point);rn"; $script .= "ttkarte.addOverlay(marker);rn";

if(in_array("fenster", $eigenschaften)) { $script .= "ttif(bezeichnung != "") bezeichnung = "<strong>" + bezeichnung + "</strong><br />"rn"; $script .= "ttmarker.openInfoWindowHtml("<p>" + bezeichnung + strasse + "<br />" + plz + " " + ort + "<br />" + land + "</p>");rn";

}

if(in_array("steuerung", $eigenschaften)) $script .= "ttkarte.addControl(new GLargeMapControl());rn"; if(in_array("kartentyp", $eigenschaften)) $script .= "ttkarte.addControl(new GMapTypeControl());rn"; if(in_array("uebersicht", $eigenschaften)) $script .= "ttkarte.addControl(new GOverviewMapControl());rn";

$script .= "t}rn"; $script .= "}rnrn"; $script .= "</script>rn";

Die erste der beiden Variablen, $script, beinhaltet den notwendigen JavaScript für die Darstellung der steuerbaren Straßenkarte. Je nach angegebenen Eigenschaften (Navigation, Kartenübersicht etc.) werden zusätziche Zeilen eingefügt.

Die zweite Variable, $karte, enthält den HTML-Code für die statische Karte sowie den Aufruf der in $script dargestellten JavaScript-Funktion:

  $karte = "<div id="karte" style="width:".$b."px; height:".$h."px">rn";  $karte .= "<img src="http://maps.google.com/staticmap?center=".$position."&zoom=".$zoom."&size=".$b."x".$h."&markers=".$position."&key=".$key."" />rn";  $karte .= "</div>rnrn";  $karte .= "<script type="text/javascript">rnrn";  $karte .= "zeigekarte("".$bezeichnung."", "".$strasse."", "".$plz."", "".$stadt."", "".$land."");rnrn";  $karte .= "</script>rn";

return $$wert;

}

Nachdem Sie die beiden Funktionen am Anfang Ihres Dokuments eingebunden haben, werden beim Aufruf der Funktion google_daten() die Adresse sowie die Eigenschaften übergeben:

google_daten("Landtag Nordrhein-Westfalen", "Platz des Landtags 1, Düsseldorf", "600, 500, 15", "fenster, steuerung, kartentyp, uebersicht");

?>

Es beginnt der HTML-Bereich des Dokuments. An zwei Stellen muss die Funktion google_maps() eingebunden werden. Im <head>-Bereich wird das Script, im <body>-Bereich die eigentliche Karte eingebunden:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Google Maps</title>

<? echo google_maps("script"); ?>

</head>

<body>

<? echo google_maps("karte"); ?>

</body>

</html>

Um Google Maps mit dieser PHP-Anwendung einsetzen zu können, bedarf es keiner Kenntnisse mit der API von Google Maps. Die Angabe des API-Keys ist die einzige Änderung, die Sie an der Funktion vornehmen müssen. Des Weiteren müssen nur die entsprechenden Daten (Adresse und Eigenschaften) beim Funktionsaufruf der ersten Funktion übergeben werden sowie die zweite Funktion an den entsprechenden Stellen des HTML-Bereichs Ihres Dokuments aufgerufen werden.

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Hinterlasse einen Kommentar

19 Kommentare auf "Google Maps mit PHP"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] Google Maps mit PHP | Dr. Web Magazin – Mit Google Maps lassen sich ja bekanntlich eindrucksvolle, steuerbare Straßenkarten auf der eigen Internetpräsenz darstellen. Wer Google Maps jedoch auf seine Website einbinden will, muss sich erst mal mit der API auseinandersetzen. Folgende PHP-Anwendung erleichtert die Einbindung. […]

webi
Gast

Na ja… die hier meckern. Erstmal besser machen… wenn du nicht fähig bist einfachen PHP Code zu lesen dann tut es mir leid. Ich finde den Artikel in Ordnung und den Code eigentlich ganz gut … man kann die snippets gut in sein Code einbinden.

trackback

[…] Google Maps mit PHP […]

trackback

[…] Google Maps mit PHP […]

~~~d(o.o)b~~~
Gast

@christian
Ich habe mir die Klasse eben einmal angeschaut – sehr geil!
Gut zu verstehen, einfach und die Doku auf Deutsch – was will man mehr… 😉
Vielen Dank für den Tipp!… ^^

hAVE pHUN
~~~d(o.o)b~~~

Sven Lennartz
Gast

was die präsentation des quellcodes angeht bin ich sicher das denis das besser kann. aber er kennt das worpdress hier noch nicht, früher haben wir das ja alles von hand gemacht.

syntax-highlighter haben wir, und haben den zb
hier eingesetzt
gab dann aber wieder andere dinge die nicht gefielen.

~~~d(o.o)b~~~
Gast
@Achim Mag ja sein, das der Code schlecht ist – ich bin kein wirklicher PHP-Freak und kann das deshalb nicht so beurteilen. Doch haben wir nicht alle mal klein angefangen? Das Script funktioniert jedenfalls und im Artikel wird Schritt für Schritt erklärt, was das Script macht – so what?… @Shocker Kommentare? Sorry, also ich bin, wie bereits erwähnt, kein ausgesprochener PHP-Mensch, doch selbst ich habe kapiert, um was es da geht – Sind doch mehr oder weniger nur Variablen… 😉 Wer Zeit hat, hier Kommentare zu schreiben, kann doch auch mal schnell eine bessere Version des Scripts schreiben… ^^ @W.Wagner… Read more »
Robert Mayer
Gast

Habe anfangs auch direkt mit der API herumgespielt – ist recht gut, um sich mal mit der Materie auseinanderzusetzen.

Als großer Fan von jquery verwende ich nun jmaps (http://code.google.com/p/jmaps/) genial einfach und recht schlank.

W.Wagner
Gast

Hm,

warum überhaupt soviel Aufwand? Man kann doch jede beliebige Karte von Google-Maps bequem per iframe einbinden. Und jeder aktuelle Browser unterstützt inzwischen iframes.

Shocker
Gast

Ich sage ja auch nicht, dass der Artikel schlecht ist, der ist wahrscheinlich für einige sogar recht nützlich. Wo es mich sträubt ist der Code, der im übrigen auch als Ganzes in der Beispieldatei nur bedingt lesbarer wird, da kein einziger Kommentar vorhanden ist…

Ich würde euch gerne ein besseres Beispielscript schreiben, aber dafür fehlt mir momentan leider die Zeit. Das soll jetzt allerdings nicht so rüberkommen, dass ich gerne meckere, aber selbst nichts machen will…ich will nur vermeiden, dass sich so ein Codingstil weiter verbreitet. 😉

Achim
Gast

@~~~d(o.o)b~~~
Was nützt es den Code runterzuladen, wenn der mehr als schlecht ist!

Sehr einfacher Schutzmechanismus und Reflexreaktion: Vom eigentlichen Fehler ablenken und andere fordern – Kritik und Meinungen sind nicht mehr erwünscht.

PS: Das kein Syntaxhighlighting vorhanden ist, kann man verzeihen, aber nicht das vorgestellte Code-Beispiel.

christian
Gast

vielleicht interessiert den einen oder anderen die PHP Klasse GMapper

http://www.ajax-info.de/google-maps-api-klasse-in-php

~~~d(o.o)b~~~
Gast

Zugegeben – der Code im Artikel ist ziemlich unleserlich…
Aber schliesslich kann man sich das Script downloaden und dann im Editor seiner Wahl anschauen, nüch… ^^

Hier können die Kommentatoren anscheinend alles besser…
Also ran an die Tastatur, liebe Leute, und selbst mal einen Artikel schreiben – dann wird vielleicht dem Einen oder Anderen klar, das dies nicht unbedingt so flott von der Hand geht… 😉

hAVE pHUN
~~~d(o.o)b~~~

Shocker
Gast

Uah…bei solchen Artikeln bzw. Code ist es ja kein Wunder, dass PHP den Ruf einer Kiddie-Sprache bekommt/hat.

Muss das wirklich sein, dass Dr. Web solche Beispiele anführt und womöglich unerfahrenen Programmierern auch noch diesen Programmierstil anlernt? brrrr :/

Achim
Gast

@52eins
Ob nun Martin das besser kann oder nicht, macht den Artikel auch nicht besser bzw. ist das kein Grund, über den schlechten Artikel hinwegzutäuschen.
Wenn nicht mal der Unterschied zwischen doppelten und halben Anführungszeichen in PHP bekannt ist, dann fehlt wohl mehr als die Grundlagen.
Und dann noch “gloabl” – Guten Morgen…!

netzmeister
Gast

Also da muss ich zustimmen … der Code ist so unformatiert, dass es ein Fehler sein muss 😉 Zeilenumbrüche und Einrückung sollten Standard sein … ggf. natürlich Syntax-Highlighting.

Und Doppeldollar ($$) sind ja ganz was übles – das geht besser!

52eins
Gast

@Martin: schreib’s doch besser? Wenn Du’s kannst: super. Wenn Du’s hier veröffentlichst: besser. Wenn Du mit Deinem Know-how hier öfter was publizierst (Dr. Web sucht immer Autoren): am besten.

André
Gast

Sorry kann ich mich nur anschließen. Syntax Highlighting wär ganz brauchbar ich bekomm ja schon Kopfschmerzen wenn ich versuche das zu Verstehen. Aber soviel Zeit hab ich dann doch nicht.

Martin Holzhauer
Gast

Sorry das ich das mal sagen muss, aber das ist ein schrecklicher Artikel.

Und das was hier an PHP Quelltext “fabriziert” wurde ist ja mal grausig. Unstrukturiert, Veraltet und vorallem für einen Artikel total unlesbar.
Wozu wurde denn wohl der Zeilenumbruch erfunden?

Edit: Noch ganz vergessen – Syntaxhighlighting wäre auch was feines – aber naja Qualität nimmt hier ja eh immer weiter ab.

wpDiscuz