Skip to content

Wie man Google Maps ganz einfach in ein Blog einbinden kann

Um Kartenausschnitte aus Google Maps in ein Blog einzubinden, gibt es drei Möglichkeiten, die bisher mehr oder weniger problematisch waren.

Am einfachsten und dümmsten ist das Anfertigen und Hochladen von Bildschirmkopien, was in der Vergangenheit bereits zu Abmahnungen in vierstelliger Höhe geführt hat, weil der feine Unterschied zwischen einer kopierten Grafikdatei und eingebundenen Serverdaten nicht beachtet wurde.

Die zweite Möglichkeit, zu der Google selbst einlädt, ist das Einbinden eines HTML-Code-Schnipsels, der – vereinfacht ausgedrückt – ein Fenster (Iframe) auf das Google-Maps-Angebot öffnet. Diese Methode ist jedoch auf nichtgewerbsmäßige Webauftritte beschränkt. Es gibt daher ein Problem, sobald der eigene Webauftritt durch Werbung unterstützt wird. Unabhängig davon, ob die Werbeeinnahmen aufs eigene Konto gehen oder in die Taschen eine "Gratis"-Hosters fließen, können solche Seiten als gewerbliche Webauftritte zählen.

Für all jene Webschaffenden, die nicht über vollkommen einnahmenfreie Seiten verfügen, hat Google eine Programmierschnittstelle entwickelt, das sogenannte Google Maps API. Dieses wird nicht nur für rechtlich unbedenklich gehalten (auch von mindestens einem Juristen) und ist deutlich vielseitiger in den Gestaltungs- und Interaktionsmöglichkeiten, sondern hier wird auch jedem Webmaster ein eindeutiger Schlüssel zugeordnet, sodass Google die volle Kontrolle über die Auslieferung oder Nichtauslieferung der Karteninhalte behält und bei zu intensiver Nutzung Ausgleichszahlungen aushandeln oder aber gezielt Inhalte sperren kann. Diese dritte Lösung wäre perfekt für Blogs geeignet, eröffnet aber wiederum das Problem, dass Javascriptcode sowohl in den unsichtbaren Kopf- als auch in den Inhaltsbereich der Seite eingefügt werden muss. Wer mit einer fertigen Blogsoftware arbeitet, möchte aber wahrscheinlich nur ungern Googles Javascriptdateien in die Vorlagendateien einbinden, damit nicht bei jedem Seitenaufruf erst einmal haufenweise fremder Code durch die Gegend geschoben werden muss, der zudem nur dann wirklich benötigt wird, wenn auf der jeweiligen Blogseite tatsächlich auch ein Kartenausschnitt dargestellt wird.

Für die von mir verwendete Blogsoftware (Serendipity) gibt es zwar ein fertiges Google-API-Plugin von Zoran Kovacevic, das erlaubt jedoch nur die Darstellung eines für alle Seiten gleichen Kartenausschnitts in der Seitenleiste. Das ist nett für Blogs, die sich mit einem geografisch eng begrenzten Gebiet befassen, ich fand es jedoch für meine Zwecke ungeeignet.

Um aus dieser Zwickmühle zu entkommen, kann man nun die Möglichkeiten, die Google mit der Nutzung des API anbietet, mit der Einfachheit, die das Iframe-Codeschnipsel der bekannten Google-Maps-Seite bietet, kombinieren. Man benötigt dazu nur eine einzige zusätzliche Datei im Startverzeichnis des Blogs, die den ganzen API-Code enthält.

Der folgende Code könnte beispielsweise unter dem Namen "map.php" auf dem Webserver des Blogs abgelegt werden:

<head>
<script
 src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=LANGEKRYPTISCHEZEICHENFOLGE"
 type="text/javascript">
</script>
<script
 type="text/javascript">
 function initialize() {
 if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("karte"));
  map.setCenter(new GLatLng(<?php echo $_GET['ll']; ?>), <?php echo $_GET['z']; ?>);
  map.setMapType(G_NORMAL_MAP);
  map.addControl(new GSmallZoomControl());
  }
 }
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="karte" style="width: 100%; height: 100%"></div>
</body>


Im Blogeintrag selbst ist dann nur noch folgende Codezeile einzufügen:

<iframe width="400" height="300" src="map.php?ll=51.472973,7.472579&z=24"></iframe>

Die Koordinaten (ll=51.472973,7.472579) und den Zoomfaktor (z=24) kann man einfach aus Google Maps übernehmen. In diesem Fall sollten die Pinguine des Dortmunder Zoos erkennbar sein:



Hier zum Vergleich der entsprechende Ausschnitt bei Google Maps

Jetzt sollte man noch dafür sorgen, dass nicht jeder die Datei map.php in seinem eigenen Webauftritt einbinden kann. Auch dafür gibt es eine einfache Lösung – aber das ist eine andere Geschichte.

Wegen der unklaren und in meinen Augen widersprüchlichen Angaben zur Zulässigkeit von Luftbildern in der Anfangsdarstellung der Karten empfehle ich momentan, das Aktivieren der Satelliten- oder Hybriddarstellung dem Nutzer der Seite zu überlassen. Der Spiegel hat zwar am 29. Februar 2008 eine Aussage von Google-Sprecher Kay Oberbeck dazu veröffentlicht, ob die im Ernstfall rechtlichen Bestand hätte, weiß ich jedoch nicht zu sagen. Auf die Frage "Wer darf Karten und Luftbilder von Google Maps per API eingebettet zeigen?" erhielt Spiegel-Redakteur Konrad Lischka jedenfalls die eigentlich positive Antwort: "Die kostenfreie Google Maps API darf auf Seiten angezeigt werden, welche für jedermann frei zugänglich sind, unabhängig davon ob es sich dabei um gewerbliche oder nicht-gewerbliche Seiten handelt. Ansonsten wird eine kostenpflichtige Google Maps Enterprise Lizenz benötigt." Auch von der Firma GeoContent gibt es laut einem Kommentar in Robert Basics Blog inzwischen grünes Licht für die API-Verwendung.

Trackbacks

blog.lutz-nelde.de am : PingBack

Die Anzeige des Inhaltes dieses Trackbacks ist leider nicht möglich.

Amerikanerin verklagt Google wegen falscher @ Video News am : Amerikanerin verklagt Google wegen falscher Navigation

Vorschau anzeigen
Eine Frau aus Utah wollte einen (…) und fragte vorher Google Maps um Rat. Dort bekam sie aber falsche Navigationsangaben und wurde aufgrund dessen von einem Auto angefahren. Jetzt verklagt die Amerikanerin G...

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

jwqlb am :

wie hast du denn den rahmen um das iframe hinbekommen?

HH am :

ich versuche jetzt seit Stunden, ein in einen Artikel einzubinden, aber er zeigt die Map dann einfach nicht an, wenn ich die Url im Browser selbst aufrufe wird alles korrekt angezeigt ??

Muß man irgendwas beachten, wenn man in einem Artikel ein Iframe einbinden will ??

Martin Vogel am :

Was wird denn stattdessen angezeigt? Wenn der Text "Karten mit diesem Zoomwert stehen nicht zur Verfügung" erscheint, muss statt "z=24" ein kleinerer Zahlenwert genommen werden.

HH am :

es erscheint nur der Rahmen des Iframe, der Inhalt fehlt komplett. Den Zoomwert habe ich schon auf 8 runtergesetzt, wenn ich die Seite http://...map.php?ll=51.472973,7.472579&z=8 im Browser aufrufe funktioniert alles bestens.

Martin Vogel am :

Hm, ich sehe da die Karte von Budapest und Umgebung…
http://www.villakunterbunt2000.de/archives/49-Webcams-in-Ungarn.html

HH am :

ja gestern Nacht ging es dann doch plötzlich, obwohl ich def. nichts am Code geändert habe ... keine Ahnung. Auf jeden Fall Danke für die Mühe.

Frederik Müller am :

Ein ausgezeichneter Artikel! Ich wollte ebenfalls die API einbinden; Firefox und Safari spielen mit, nur der IE (6, 7 und 8.) zickt ;-(. Aufgegeben.

Da ich XHTML 1.0 Strict verwende, meckert die Validierung beim *iframe*. Mittels object klappt die Validierung dann doch, samt Rahmen - siehe auch z. B. selfhtml.org:

###object name="Stra&szlig;enkarte" style="width:550px; height:400px; border:1px solid #990033;" data="map.php?ll=49.466088,11.067416"######/object###

nicolas am :

Danke für den informativen Artikel!

Hab ich gleich versucht in s9y umzusetzen, allerdings wird statt der "map.php" mein Archiv im iframe angezeigt.

Frederik am :

Hallo nicolas,

Dein Pfad zur Karte ist

...medicinescout.nichess.de/archives/

Vermutlich liegt die map.php nicht in diesem Verzeichnis?

Tobi am :

Hallo Martin,

in meinem Iframe unter serendipity werden die "Steuerbuttons" zum Umstellen des Kartentyps nicht angezeigt (Firefox 3.0). Hast du eine Ahnung, woran das liegen kann?

Und noch ne Frage: Kann man wohl auch auf bei google-maps hinterlegte Usermaps verweisen. Dann könnte ich dort GPS-Tracks darstellen.

Gruß

Tobi

Tobi am :

Hat sich erledigt. Da ich auch noch GPS-Tracks (GPX) einbauen wollte, habe ich auf ein anderes Tool gewechselt.
Danke trotzdem!

Gruß

Tobi

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Um einen Kommentar hinterlassen zu können, erhalten Sie nach dem Kommentieren eine E-Mail mit Aktivierungslink an ihre angegebene Adresse.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Formular-Optionen