Seit einigen Tagen ist es nun soweit: es ist mir gelungen, Google Maps fast nahtlos in mein Weblog einzubinden. Bei manchen Postings gibt es einen zusätzlichen Link “Google Map”, bei dem weitere Infos ersichtlich sind. Meist wird dabei das Foto aus dem Posting mit ergänzendem Text und in Verbindung mit einer Google Map dargestellt. Ab und zu auch mal nur Text ohne Foto oder nur das Foto alleine und in einzelnen Fällen, dort wo es weder ergänzenden Text noch eine Foto gibt, einfach nur einen Marker auf der Karte.

Es ist dies ein erster Schritt, um später einmal in meinem Weblog, meine aktuelle Position während Fahrten mit dem Renner oder Mountainbike darstellen zu können. Wie es funktioniert?

Bis zur Realisation dieses neuen Features war einiges an Studium in diesem Buch, sowie in der API-Dokumentation von GoogleMap notwendig. Auch ein Blick in den einen oder anderen Sourcecode hat geholfen.

Die Ausgangslage: Expression Engine, die Software für dieses Weblog, läuft mit PHP und benützt eine MySQL-Datenbank. Expression Engine hat ein paar Datenbankbefehle die das Handling mit der Datenbank in der Regel deutlich vereinfachen. Expression Engine arbeitet sehr oft mit Templates. Dieses Weblog läuft in einer eigenen Domain.

Vorbereitungen: Zuerst muss ein API-Key bei Google gelöst werden. Damit wird ermöglicht, dass überhaupt Google Maps in einer Domain dargestellt werden können. Der Key ist ein x-Zeichen langes Gemisch auch Zahlen und Buchstaben und scheint einmalig zu sein. Er kann gratis bei Google bezogen werden.

Daten in der Datenbank: Zwecks besserem Handling der Daten in meiner Weblogdatenbank habe ich zusätzliche Felder für die GoogleMap-spezifischen Daten wie zum Beispiel die Koordinaten des Zentrums der Map definiert. Weitere Felder sind ein Link auf ähnliche Themen, ein Textfeld für weitere Infos und ein Feld für die Defaultgrafik-Skala der Map.

Das Template: Für Interessierte habe ich hier den Code des Templates festgehalten. Expression Engine-spezifische Befehle habe ich markiert. Weil ich meine Fotos nicht alle bei flickr gespeichert habe, sondern bei einem zweiten Provider, musste ich zwei fast identische Codeteile nur wegen dieser Besonderheit bereitstellen. Da liesse sich noch einiges optimieren.