Anleitung: Google Maps richtig auf der Webseite einbinden

Rund 3 Minuten und 12 Sekunden verwendeten Personen Google Maps im Juli 2020 täglich. Der Online-Kartendienst ist aus dem Alltag kaum noch wegzudenken. Ganz gleich, ob nach einem Restaurant, einer Unterkunft, einem Geschäft oder dem nächsten Ausflugsziel gesucht wird: Google Maps ist für geografische Suchanfragen die erste Anlaufstelle. Unternehmen können sich dieses Wissen zunutze machen und die Anfahrt zu Ihrer Lokalität mithilfe von Google Maps schnell und unkompliziert kommunizieren.

Wie Sie Google Maps auf Ihrer Webseite integrieren und welche Kosten dabei auf Sie zukommen, erfahren Sie in dieser Anleitung.

Private Nutzung von Google Maps: HTML iFrame verwenden

Sobald Sie Ihren Eintrag auf Google Maps erstellt haben, können Sie diesen mithilfe eines HTML iFrame-Codes in Ihre Webseite integrieren. Beachten Sie jedoch, dass dieses Vorgehen nur für private Webseiten vorgesehen ist.

Um den iFrame-Code zu erhalten, rufen Sie Ihren Eintrag auf Google Maps auf. Klicken Sie nun in der Seitennavigation auf den Punkt „Teilen“. Nun wählen Sie den Reiter „Karten einbetten“ aus.

Quelle: Screenshot Google Maps / Wellenwerk 

Sie erhalten automatisch den HTML-Code, den Sie benötigen, um Google Maps auf Ihrer Webseite einzubinden. Optional können Sie über das Dropdown die Größe der Karte bestimmen. Klicken Sie nun auf die Schaltfläche „HTML kopieren“ und fügen Sie den Code an die gewünschte Stelle auf Ihrer Seite ein. 

Quelle: Screenshot Google Maps / Wellenwerk 

Gewerbliche Nutzung von Google Maps: API Key einbinden

Betreiben Sie eine Unternehmenswebseite, dann müssen Sie einen weiteren Schritt gehen, um den Service von Google Maps zu verwenden. Gewerbliche Webseiten sind dazu verpflichtet, einen Google API Key einzurichten und diesen in Ihre Webseite zu integrieren. 

Die API (Application Programming Interface) bildet eine Schnittstelle zum Google Service und dient dazu, Webseiten-Daten zu messen. Möchten Unternehmen auf Ihrer Seite Google Maps einbinden, dann entstehen nämlich Kosten für den Service – gemessen an den Aufrufen beziehungsweise Interaktionen mit der Kartennavigation. Außerdem ermöglicht die API interaktivere Möglichkeiten, Google Maps zu gestalten und den Kartendienst an den Look Ihrer Webseite anzupassen. Welche API für Sie geeignet ist, finden Sie auf der Google API Picker Webseite heraus.

Um die API zu beantragen, wählen Sie zunächst Ihre gewünschte Darstellungsvariante auf der API Picker Webseite aus. Loggen Sie sich nun in die Google Cloud Plattform ein. Hier müssen Sie zunächst ein Rechnungskonto erstellen, da Sie ohne dieses die API nicht aktivieren können.

Geben Sie alle notwendigen Informationen (Name, Adresse, Steuerinformationen und weitere) während des Registrierungsprozesses an. Haben Sie das Rechnungskonto erstellt, klicken Sie in der Seitennavigation auf „APIs“. Nun können Sie den Schlüssel für die API generieren, indem Sie Ihre Webseite angeben. Der Schlüssel ist allein für Ihre Seite gültig. Sobald Sie den Code aktiviert haben, müssen Sie diesen in den Quellcode Ihrer Webseite integrieren. 

Um Google Maps per API einzubinden, sind Programmierkenntnisse eine notwendige Voraussetzung, weshalb sie diese Aufgabe am besten von der IT-Abteilung durchführen lassen. Eine Ausnahme sind jedoch WordPress-Themes (wie beispielsweise Avada) oder das kostenlose HubSpot CMS, die das Einbinden von Google Maps vorsehen.

Hier können Sie die API leicht ins Dashboard einfügen und müssen sich nicht an den Code Ihrer Webseite heranwagen. Mithilfe eines Widgets binden Sie Google Maps an der gewünschten Stelle Ihrer Webseite ein und passen den Look mithilfe des Customizers an Ihr Corporate Design an.

Quelle: Screenshots WordPress Customizer (Fusion Builder Live)

Deshalb sollten Sie Google Maps auf Ihrer Webseite einbinden

Jedes Unternehmen hat die Möglichkeit, einen kostenfreien Google Maps Eintrag zu erstellen. Alles, was Sie dazu benötigen, ist ein Google My Business Konto. Hier können Sie alle notwendigen Informationen zu Ihrem Unternehmen angeben und werden dann unter der angegebenen Adresse als Pin in Google Maps angezeigt.

Darüber hinaus können Sie den Kartenausschnitt mit Ihrem Pin in Ihre eigene Webseite einbinden und so eine interaktive Möglichkeit für Webseitenbesucherinnen und Webseitenbesucher schaffen, die eine Anreise zu Ihrem Geschäft planen.

Binden Sie Google Maps am besten unter dem Menüpunkt „Anfahrt“ in Ihrer Webseite ein. 

Anstatt dass Webseitenbesuchende die Adresse kopieren und dann extern nach einer Navigationsmöglichkeit suchen müssen, können Sie ganz intuitiv den Routenplaner mit Google Maps öffnen. Die Userinnen und User erhalten auf diese Weise direkt auf Ihrer Webseite die bestmögliche Route vorgeschlagen – ganz gleich, ob sie mit dem Fahrrad, Auto, zu Fuß oder sogar mit der Bahn anreisen wollen.

Das Google Maps Pin enthält außerdem zusätzliche Informationen wie Öffnungszeiten oder Bewertungen, sodass Interessierte direkt alles Notwendige erfahren, was sie vor einem Besuch Ihres Lokals wissen müssen. 

Quelle: Screenshot https://www.jumphouse.de/berlin/anfahrt/ 

Wenn Sie auf Ihrer Webseite Google Maps einbinden möchten, gibt es zwei unterschiedliche Vorgehensweisen: die private und die gewerbliche Nutzung des Kartendienstes. 

Was kostet Google Maps API?

Um eine Google Maps API zu erhalten, müssen Sie ein Konto auf der Google Cloud Plattform hinterlegen, damit die Kosten für die Nutzung abgerechnet werden können. Das Einrichten der Google Maps API ist jedoch zunächst kostenlos. Ob und wie viel Sie für den Service zahlen, ist abhängig davon, welche API Sie verwenden und wie viele Interaktionen und Webseitenbesuche Sie verzeichnen. 

Die Kosten für die einzelnen Funktionen richten sich meist nach je 1000 Anfragen. Der Preistabelle auf der Webseite der Google Cloud Plattform können Sie entnehmen, welche Kosten auf Sie zukommen. Jeder Account erhält ein Guthaben von 200 US-Dollar im Monat für Maps, Routes und Places. Liegen die Ausgaben darüber, werden diese vom Rechnungskonto eingezogen. Für große Unternehmen stellt Google auch Mengenrabatte zur Verfügung. Über den Button „Vertrieb kontaktieren“ können Sie Ihr individuelles Angebot abklären.

Die 200 US-Dollar, die von Google monatlich kostenlos zur Verfügung gestellt werden, reichen laut eigenen Angaben für bis zu 28.000 Ladevorgänge von dynamischen Karten oder 100.000 von statischen Karten. Bei rund 100.000 Aufrufen rechnet Google mit 2 US-Dollar bei statischen und 14 US-Dollar bei dynamischen Karten pro 1.000 Aufrufe. Eine Webseite, die ihren Besucherinnen und Besuchern eine statische Karte anbietet und monatlich 80.000 Aufrufe verzeichnet muss mit den folgenden Kosten rechnen:

(200.000 / 1.000) * 2 = 400 US-Dollar. Abzüglich der 200 US-Dollar, die monatlich zur Verfügung gestellt werden, würden sich so Kosten von rund 200 US-Dollar pro Monat ergeben. 

Fazit: Nutzen Sie Google Maps als sinnvolle Ergänzung auf Ihrer Webseite 

Google Maps ist mehr als ein Navigationssystem. Es ist zu einem geografischen Unternehmensverzeichnis geworden, das es Firmen erleichtert, eine benutzerfreundliche Anfahrtsplanung zu ihrem Betrieb anzubieten. 

Indem Sie Google Maps auf Ihrer Webseite einbinden, schaffen Sie eine einfache Methode für Webseitenbesucherinnen und Webseitenbesucher, die Anreise zu Ihrem Geschäft zu recherchieren. Achten Sie jedoch darauf, dass Sie für die gewerbliche Nutzung einen Google API Key benötigen.

Titelbild: Sheng Li / iStock / Getty Images Plus