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:

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:

Howto: Google Maps on WordPress.com

Update: WordPress.com started to offer a method to embed dynamic Google Maps. For the life of me I don’t get it working so I still believe this may be useful for some.

I think there’s a good reason for this one:

We all struggle from time to time with WordPress.com very strict Policy on JavaScript, iframes and the like. For example grabbing the embedding code from Google Maps won’t work. But in February Google announced an API that allows you to embed a map as an image without JavaScript. This works just fine with WP.com’s security policy.

Read this carefully (I said CAREFULLY), or you may end up with no map. And I won’t help you. You need to have a basic understanding of HTML, specifically of <img src="" />. Just skip over the following paragraph if you don’t want to be bothered with too much technical stuff.

You can read Google’s documentation on the Static Maps API (that’s what they call it) if you want to understand exactly what’s happening here and do a little more. However I’ll try to introduce you to this without too much techno babble. API (Application Programming Interface) means in this case that the Google Maps servers will render a picture from their maps database based on the parameters you specify. You do that by embedding an image. The URI of this image contains the parameters such as latitude, zoom, image size, API-key… you name it.

1. First and foremost you need to signup for an API-key to use this. One API-key allows you to embed static maps on one domain. Multiple API-keys for different domains are possible. You can get your API-key here. You need to have a Google account for this. The API-key will be associated with your blog domain such as example.wordpress.com so images cannot embedded anywhere but at this domain (users with custom domains: read the note at the bottom of the post, please). Luckily you don’t need to keep your API-key ready, as long as you remember your domain name.
2. When you have your API-key(s) you’re ready to do the magic. You can go to the static map wizard. There you search for the location, define width and height for the map and fill in the domain associated with your API-key. You will receive a URI like this:

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. Use this as the Image URI in a post or sidebar widget and you have embedded a Google Map. Cool people may wanna link the image to a Google Maps search that returns the location displayed. It’s not as bright and shiny as a dynamic map, but far easier than doing screenshots all the time.

Here’s my map:

Here’s the exact code, I’m using to embed it:

<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>

Custom Domain Users: If you’re on a custom domain (as I am) the map won’t display in the Rich-Text Editor. On the Blog however it will appear just fine. That is because your Google allows the image to be loaded only from the domain associated with the API-key. I suggest you define height and width for the image, so you see at least it’s outline in the Visual Editor.

Social Bookmarks: