Google Maps einbinden: API oder iFrame?

Als der Dienst Google Maps am 8. Februar 2005 startete, ahnten wohl sogar die Ver­ant­wort­li­chen des Groß­kon­zerns selbst nicht im Ansatz, wie sehr der Online-Kar­ten­dienst den Alltag verändern würde. Seit mitt­ler­wei­le über einem Jahrzehnt versorgt der Web­ser­vice seine Nutzer mit Sa­tel­li­ten­bil­dern aus der ganzen Welt und ist spä­tes­tens seit dem Aufstieg mobiler Geräte zu einem un­ver­zicht­ba­ren Begleiter geworden. Bequem wird schon von Zuhause aus in­spi­ziert, wie weit das aus­ge­wähl­te Hotel vom Strand entfernt ist oder welche Re­stau­rants besonders angesagt sind. Unterwegs ist Google Maps nicht selten Helfer in der Not und weist einem den Weg zum an­ge­peil­ten Ziel – egal ob zu Fuß, mit dem Fahrrad oder mit dem Auto. Selbst die Fahrpläne der Deutschen Bahn sind abrufbar.

Als Website-Betreiber können Sie den Google-Service für Ihre Zwecke nutzen, indem Sie Aus­schnit­te von Google Maps auf Ihrer Homepage verwenden. Hierin markieren Sie bei­spiels­wei­se den Standort Ihres Un­ter­neh­mens, Hotels, Geschäfts oder Ihrer Praxis oder Sie prä­sen­tie­ren in dem Kar­ten­aus­schnitt gleich eine Anfahrts- bzw. Weg­be­schrei­bung – so er­leich­tern Sie es Ihren Usern, zu Ihnen zu finden. Wie können Sie Google Maps einbinden und welche Be­din­gun­gen gelten für die ge­werb­li­che Nutzung?

Im dar­auf­fol­gen­den Na­vi­ga­ti­ons­me­nü finden Sie ver­schie­de­ne Ein­stel­lungs­mög­lich­kei­ten, mit denen Sie bei­spiels­wei­se Fahr­rad­we­ge oder die Routen des öf­fent­li­chen Nah­ver­kehrs ein­blen­den können, sowie Tipps und Tricks rund um den Kar­ten­dienst. Über den Menüpunkt „My Maps“ starten Sie den Map-Editor, mit dessen Hilfe Sie Ihre in­di­vi­du­el­le Karte erzeugen. Sie können hier auch auf alle bereits er­stell­ten Maps zugreifen.

An­schlie­ßend kopieren Sie diesen Code­schnip­sel in den Quellcode Ihrer Website. Über die Pi­xel­an­ga­ben innerhalb des Codes (im Beispiel 640 x 480 Pixel) re­gu­lie­ren Sie die Größe des Kar­ten­aus­schnitts. Da es sich bei dem ein­ge­bun­de­nen HTML-Code um ein so­ge­nann­tes iFrame-Element handelt, wird der Kar­ten­in­halt bei jedem Aufruf Ihrer Seite parallel vom Google-Server geladen, ohne dass Ihr Webserver in­vol­viert ist. Diese In­line­frame-Technik wird von nahezu allen modernen Browsern un­ter­stützt und kommt bei­spiels­wei­se auch beim Einbinden von Social-Media-Elementen zum Einsatz.

Die In­te­gra­ti­on von Google-Maps via iFrame ist lediglich für den privaten Gebrauch erlaubt. Möchten Sie den Kar­ten­dienst auf ge­werb­li­chen Seiten nutzen, sieht Google die Ein­bin­dung über die of­fi­zi­el­len Google Maps APIs vor.

Die Ein­bet­tung von Googles Kar­ten­dienst in Ihre Website gestaltet sich mithilfe einer Google Maps API (ap­pli­ca­ti­on pro­gramming interface) etwas komplexer als mit der iFrame-Technik. Gleich­zei­tig eröffnen sich Ent­wick­lern durch die Nutzung dieser Pro­gram­mier­schnitt­stel­len voll­kom­men neue Mög­lich­kei­ten, Google Maps in das eigene Web­pro­jekt zu in­te­grie­ren. Beim Instant-Messaging-Dienst WhatsApp ist es bei­spiels­wei­se dank der Ver­wen­dung einer solchen API möglich, seinen Freunden den exakten Standort auf einer Karte zu über­mit­teln. Und auch der Web­ser­vice Plane Finder, der den welt­wei­ten Flug­ver­kehr in Echtzeit darstellt, nutzt ver­schie­de­ne Google Maps APIs.

Um einen Überblick über die ver­schie­de­nen APIs zu erhalten und her­aus­zu­fin­den, welche Pro­gram­mier­schnitt­stel­len am besten zu Ihrem Web­pro­jekt passen, ist ein Blick auf die Über­sichts­sei­te im Ent­wick­ler­be­reich der Google-Homepage emp­feh­lens­wert.

2. Setzen Sie den Vorgang mit einem Klick auf „WEITER“ fort und be­stä­ti­gen Sie die Nut­zungs­be­din­gun­gen. An­schlie­ßend erstellen Sie ein neues Projekt und den Browser-API-Schlüssel. 3. Nachdem Sie den API-Key erzeugt haben, können Sie ihn sofort in Ihrer Web­an­wen­dung verwenden. Welche Einträge Sie in Ihrem HTML-Dokument vornehmen müssen und an welcher Stelle der Schlüssel in­te­griert wird, do­ku­men­tiert Google Schritt für Schritt in diesem Leitfaden.

Die Ver­wen­dung der Google-Pro­gram­mier­schnitt­stel­len ist nicht zwangs­läu­fig mit Kosten verbunden. Ob Sie für den Web­ser­vice zahlen müssen oder nicht, hängt vielmehr davon ab, welche Art von Website bzw. App Sie betreiben. Bei Projekten, die alle Nutzer kos­ten­frei verwenden können, zahlen Sie für den Großteil der APIs bei­spiels­wei­se nur, wenn eine bestimmte Anzahl an Aufrufen pro Tag bzw. Monat über­schrit­ten wird. Dient Ihre Website oder App dazu, den Standort von Personen oder Objekten nach­zu­ver­fol­gen, ist die Ein­bin­dung der Google Maps APIs hingegen in jedem Fall kos­ten­pflich­tig. Eine Übersicht über die ver­schie­de­nen Preis- und Nut­zungs­mo­del­le finden Sie hier. Auf dieser Über­sichts­sei­te finden Sie auch die Kon­takt­in­for­ma­tio­nen des Ver­triebs­teams, falls Sie unsicher sind, welches Modell zu Ihrem Projekt passt. 

Die Vorteile, Googles Online-Kar­ten­dienst in die eigene Website zu in­te­grie­ren, sind un­be­strit­ten: Auf ein­fachs­te Weise bieten Sie Ihren Besuchern einen Mehrwert, während Ihr Webserver keinerlei zu­sätz­li­che Ka­pa­zi­tä­ten auf­brin­gen muss – dank der Server des Such­ma­schi­nen­rie­sen. Eben an dieser Stelle hat Google 2012 ein­ge­grif­fen und die ge­werb­li­che Nutzung für Web­pro­jek­te mit hohen Auf­ruf­zah­len teilweise kos­ten­pflich­tig gemacht. Für diese ist der Einsatz der Google Maps APIs zur Ein­bin­dung der Karten ebenso Pflicht wie für Apps und Websites mit kom­mer­zi­el­lem Hin­ter­grund.

Wollen Sie im Kar­ten­aus­schnitt mehr als eine simple Mar­kie­rung des Standorts prä­sen­tie­ren, sollten Sie sich unbedingt mit Ja­va­Script und HTML auskennen. Wer Google Maps einbinden möchte, dabei rein private Be­weg­grün­de hat und auch keine Be­su­cher­mas­sen erwartet, ist hingegen mit der einfachen iFrame-Ein­bet­tungs­mög­lich­keit bestens versorgt.