Google Maps in deinen Blog einbinden

GoogleMaps ist seit ein paar Tagen mit einer neuen Funktion ausgestattet: Mit einem Klick wird einem der Codeschnippsel angeboten, mit Hilfe dessen du Google Maps in deine Webseite oder Blog einbinden kannst. Embed Video nennt sich diese Funktion bei Youtube und Co. Neu ist es sicherlich nicht, den es war schon vorher mit einem gewissen Aufwand und einiger Handarbeit möglich, Karten einzubinden. Die neue Funktion macht es aber noch einfacher.

Größere Kartenansicht

Eigene Karten easy erstellen

In diesem Zusammenhang hab ich mir gleich mal das erstellen eigener Karten angeschaut. Besitzer eines Google-Kontos können mit der Funktion “Meine Karten” eigene Maps erstellen und diese Marker, Flächen und Linien einzeichnen und diese mit zusätzlichem Text versehen. Die oben eingebundene Karte ist eine dieser Karten. Eingezeichnet habe ich die Fläche wo wir wohnen und es ließe sich jetzt noch ergänzen, zum Beispiel durch den Arbeitsplatz und meinen täglichen Weg zur Arbeit. Falls du noch kein Google Konto hast, kannst du es dir hier einrichten.
Einige wenige, aber ausreichende, Formatierungsmöglichkeit der eingezeichneten Formen werden zur Verfügung gestellt. So kann die Rahmendicke, Rahmen- und Flächenfarbe sowie die Deckkraft der Farben eingestellt werden. Deckkraft bedeutet transparenz. Praktisch ist dies, wenn die von Google zur Verfügung gestellten Informationen noch darunter sichtbar bleiben sollen.

Zusatzinformationen hinterlegen

Zu jedem eingezeichneten Element können weitere Informationen in einer Bubble hinterlassen werden. Diese Informationen können als einfacher Text oder als HTML eingegeben werden. So können zum Beispiel Fotos eingebunden werden. Diese müssen jedoch schon irgendwo auf einem Webserver liegen. Einbinden durch hochladen geht nicht. In meinem Beispiel habe ich also ein Bild eingebunden, das ich schon vorher in meinem Blog verwendet habte. Anwendbar sind auf jeden Falle zur Textformatierung notwendigen tags wie <b>…</b> für fett, <i>…</i> für kursiv und viele mehr.

Die Größe des Bubbles richtet sich nach dem Content und paßt sich dynamisch dem Inhalt an. In meinem Beispiel ist es die Bildgröße die bestimmt, welche Breite die Bubbe haben soll. So entfallen lästige Anpassungsarbeiten.

Die letzten Einstellungen

Zu guter letzt muss die Karte noch eingebunden werden. Derzeit stehen bei Google Maps ein paar einfache Einstellmöglichkeiten zur Verfügung, die sich auf die Kartengröße beziehen, also wie groß die Karte in deiner Webseite oder Blog sein sei. Gewählt werden kann zwischen Klein, Mittel und Groß oder wer es genau weiß, kann auch die Pixel genau angeben. Einmal gespeichert werden die Einstellung der Kartengröße immer wieder verwendet. Achtung! Eine Änderung der Einstellung hat jedoch keine Auswirkung auf bisher eingebundene Karten, da die Kartengröße wie schon erwähnt im Einbettungslink festgeschrieben wird.

Leider sind das auch schon alle Einstellungen. Mindestens die Zoomstufe wäre noch eine sinnvolle Erweiterung, ebenso das Festlegen des Kartemittelpunkts. Einfach zu lösen wäre dies, wenn die aktuelle Ansicht (Mittelpunkt und Zoomstufe) beim generieren des Links verwendet werden würde. Hier kann ich nur hoffen das es in Zukunft eine Weiterentwicklung dieses Services in dies Richtung gibt.

Code einfügen

Unter dem Punkt “Url zu dieser Seite” (oben rechts in Google Maps) bekommt man dann zu jeder aktuellen Karte den Code zum Einbetten. Das ganze ist mit einem iframe gelöst. Wer sich den Link anschaut sieht leicht, das darin die Kartengröße festgelegt ist und man diese hier noch ändern kann.

Wenn du – wie ich – WordPress verwendest, ist es beim Einfügen des Codes wichtig in den Code-Modus zu wechseln. Sonst wird der Code nicht ausgeführt sondern dargestellt und du wunderst dich, warum nur wirrer Code, aber keine Karte erscheint.

Ich finde, dies ist eine sinnvolle Erweiterung. Für ein Kundenprojekt hatte ich über genau diese Möglichkeit schon nachgedacht und Google kommt mit genau dieser einfachen Lösung.

Update 26. Oktober 2007: Google Maps Teil 2: Zoomstufe anpassen.

Ja, das Problem ist gelöst und ich zeige dir wie Du in wenigen einfachen Schritten die Zoomstufe deiner eingebundenen Google Karten anpassen kannst.