Anleitung: Google Maps bei WordPress.com

Anscheinend weiss es niemand. Deshalb habe ich es erst im WordPress.com Support Forum gepostet, dann ausführlich geschrieben und jetzt übersetzt:

Benutzer von WordPress.com haben immer wieder Probleme mit der sehr strengen Handhabung von JavaScript, iFrames etc. Zum Beispiel funktioniert das Einbetten von interaktiven Karten aus Google Maps nicht. Im Februar hat Google eine API vorgestellt die es ermöglicht eine Karte als Bild, statt als iFrame/JavaScript-Objekt, einzubetten. Das verträgt sich hervorragend mit der Sicherheitsphilosophie von WordPress.com.

Lest diese Anleitung sorgfältig (damit meine ich SORGFÄLTIG!), weil ich für eure Flüchtigkeitsfehler keine Garantie übernehmen kann. Eigentlich übernehme ich gar keine Garantie hierfür. Ein grundlegendes Verständnis von HTML, insbesondere von <img src=”" />, und Englischkenntnisse setze ich voraus. Der folgende Absatz kann auch einfach übersprungen werden, wenn Euch die technischen Grundlagen nicht interessieren.

In der der Dokumentation zur Static Maps API (so nennt Google das Verfahren) werden die Funktionsweise und weitergehende Funktionen genauer erklärt. An dieser Stelle möchte ich aber nicht in Fachchinesisch abgleiten. API (Application Programming Interface = Programmschnittstelle) bedeutet in diesem Fall einfach, dass die Server von Google Maps ein Bild nach Euren Anforderungen errechnen und übertragen. Das erreicht man, indem man das Bild einbettet. Die URI (Uniform Ressource Identifier = Adresse) des Bilds enthält die benötigten Parameter wie Koordinaten, Vergrößerung, Bildmaße, API-key usw. usf.

  1. Zuerst müsst Ihr einen API-key beantragen. Ein APi-key ermöglicht es die Karte unter einer bestimmter Domain zu veröffentlichen. Für eine andere Domain braucht man einen anderen API-key. Den API-key kann man hier beantragen. Ein Google Benutzerkonto wird dazu zwingend vorausgesetzt.Der API-key funktioniert nur mit der einen Domain, z.B. beispiel.wordpress.com, so das die Bilder nur unter dieser nicht unter andren Domains eingebettet werden können. (Benutzer mit «Domain Mapping»: Bitte lest den Hinweis am Ende des Beitrags!). Praktischerweise braucht man sich den API-key nicht zu merken, sondern nur die Blog-Domain (und das sollte möglich sein).
  2. Jetzt kan man die Karte erzeugen. Hier geht es zum Assistenten für das komfortable Erzeugen der URI. Dort sucht Ihr den gewünschten Ort, stellt Breite und Höhe des Bildes ein und gebt den Domainamen ein, für den ihr gerade einen API-key erzeugt habt. Ihr erhaltet eine URI, die so ähnlich aussieht:
http://maps.google.com/staticmap?center=52.51447,13.349024&markers=52.51447,13.349024,red&zoom=13&size=425x300&key=HERE_GOES_THE_API_KEY
  1. Verwendet dies als Bild URI in einem Blogeintrag oder einem Sidebar Widget und ihr habt eine Karte von Google Maps sauber eingebttet. Wenn man das Bild noch mit einer Google Maps-Suche zum entsprechenden Ort verlinkt ist man fertig. Es ist zwar keine bewegliche und interaktive Karte, aber allemal besser, als immer Screenshots machen zu müssen.

Meine Karte:

Map of Berlin

Der Code (dieser funktioniert nur hier):

<a href="http://maps.google.de/maps?f=q&hl=de&geocode=&q=Berlin,+Gro%C3%9Fer+Stern&sll=52.502382,13.395077&sspn=0.006988,0.015943&ie=UTF8&t=h&z=16&iwloc=addr" title="Berlin Grosser Stern"><img src="http://maps.google.com/staticmap?center=52.51447,13.349024&markers=52.51447,13.349024,red&zoom=13&size=425x300&key=ABQIAAAAUhopkvHuigV8XNrMTyyP9xRPYRQpHV3vyegops1UsckCZXJ5HxQeZ-y5Vct1BnNnd_FB2A_CBuCl9Q" alt="Map of Berlin" height="300" width="425" /></a>

Benutzer mit «Domain Mapping»: Wenn Ihr eine eigene Domain habt (so wie ich), wird die Karte im Richt-Text Editor nicht dargestellt. Im Blog wird sie aber anstandslos erscheinen. das liegt daran, dass Google das Bild nur innerhalb der Domain laden lässt, für die der API-key erstellt wurde. Wenn man die Höhe und Breite des Bilds einstellt, kann man im Editor zumindest seine Umrisse und seine Position sehen.

Social Bookmarks: