Nach wie vor ist Google Maps die beliebteste Karten-App im Netz. Sie ist auf vielen WordPress-Seiten eingebunden. Wir zeigen Ihnen, wie Sie Google Maps (API) mit und ohne Plugin auf Ihrer WordPress-Seite einbinden und was Sie dabei beachten müssen.
Bevor wir Ihnen zeigen, wie Sie Google Maps mit oder ohne Plugin in WordPress einbinden, gehen wir kurz auf den Unterschied zwischen Google Maps mit oder ohne API ein. Google APIs sind Programmierschnittstellen, die durch Zugriff auf weitere Google-Dienste den Service-Grad von Google Maps erhöhen. Bis Juni 2018 waren diese kostenlos. Seitdem müssen Sie ab einer bestimmten Anzahl von Zugriffen für diese Zusatzfunktionen zahlen.
Google Maps API mit Guthaben starten
Um Google Maps API in WordPress zu nutzen, brauchen Sie einen API Key und müssen die Daten Ihrer Kreditkarte hinterlegen. Grundsätzlich steht jedem Websitebetreiber ein Guthaben von 200 $ im Monat zur Verfügung.
Das entspricht ungefähr:
- 100.000 Zugriffen auf statische Karten (zum Beispiel Standortanzeige)
- 28.500 Zugriffen auf dynamische Karten (zum Beispiel interaktive Suche nach Freizeitmöglichkeiten)
- 25.000 Zugriffen auf 360° Google Street View Bilder
- 40.000 Zugriffe auf Wegbeschreibungen (zum Beispiel Wanderwegkarte)
Rechnen Sie damit, dass Kosten bei der Einbindung von Google Maps API auf Sie zukommen, wenn Sie darüber hinaus mehr als 10.000 Zugriffe im Monat haben oder noch weitere Dienste auf Ihre Karte aufsetzen, wie Wanderwegkarten, Karte von Immobilienanbietern, Wetterkarten. Die genauen Zugriffszahlen finden Sie in Google Analytics unter „Sessions pro Monat“. Greifen Ihre User von unterwegs, also mobil, auf Google Maps auf Ihrer Seite zu, ist dies kostenlos für Sie. Da die Kostenaufstellung von Google ziemlich komplex ist, hier der Link zur Kostenseite Google Cloud.
API oder keine API?
Grundsätzlich gibt es nach wie vor die Möglichkeit, Google Maps ohne API zu nutzen. Allerdings zeigt die Karte dann nur Ihren Standpunkt an und Ihr User kann zum Beispiel keine Routen berechnen. Trotzdem sollten Sie überlegen, ob Sie Google Maps API unbedingt brauchen.
Eine kleine Entscheidungshilfe:
- Wenn Ihre Karte nur den Standort Ihres Unternehmens anzeigen soll und Sie nur den Standard-Marker Ihres Standorts benötigen, reicht Google Maps ohne API.
- Benötigen Sie mehrere Marker, möchten Sie Ihrem User die Möglichkeit geben, Routen zu berechnen oder andere Services zu nutzen, dann müssen Sie Google Maps API einbinden.
Google Maps API: So geht’s!
Sie möchten Ihren Usern mehr Services rund um Google Maps zur Verfügung stellen als nur Ihre Standortangabe? Dann benötigen Sie die API. So erhalten Sie sie:
- Zahlungsinformationen hinterlegen: Sie müssen in jedem Fall, auch, wenn keine Kosten anfallen, Ihre Zahlungsinformationen hinterlegen. Melden Sie sich bei der Google Maps Platform an und aktivieren Sie Ihr Google-Maps-Profil.
- API-Key einbinden: Sie erhalten den für Ihren Zweck richtigen API-Key auf der Seite Maps JavaScript API. Klicken Sie auf „Schlüssel anfordern“ und folgen Sie dem Prozess.
Google Maps in WordPress einbinden
Es gibt zwei Möglichkeiten, wie Sie Google Maps in Ihre WordPress-Seite einbinden.
Binden Sie Google Maps per iFrame in WordPress ein!
Dazu brauchen Sie den HTML-Code von Google Maps.
- Gehen Sie auf die Webseite von Google Maps und suchen Sie Ihren Standort.
- Klicken Sie auf Ihren Standort-Marker und dann auf „Teilen“.
- Wählen „Karte einbetten“. Sie können auch nur den Link teilen, aber verzichten damit auf die Kartendarstellung auf Ihrer Website.
- Kopieren Sie den Code.
- Suchen Sie im Backend von WordPress die Seite und Stelle, auf der Sie die Karte einfügen möchten.
- Im Editor gehen Sie auf den Reiter „Text“ und kopieren den Code dorthin.
- Jetzt nur noch die Seite abspeichern.
Binden Sie Google Maps per Plugin in WordPress ein!
Es gibt zahlreiche Google-Maps Plugins, die Sie mit oder ohne API nutzen können. Sie bieten von Grund auf ein paar Optionen mehr als, wenn Sie nur den iFrame einbinden.
- Gehen Sie, um ein Google-Maps-Plugin zu installieren, im Dashboard unter Plugins und dann unter „Installieren“. Geben Sie im Suchfeld „Google Maps“ ein!
- In einigen kostenlosen Version stehen Ihnen unterschiedliche Marker und eine bestimmte Anzahl an Karten-Designs zur Verfügung.
- Sie können Google Maps auch in einem Widget oder als Shortcode benutzen.
Fazit
Google Maps ist ein mächtiges Tool. Allerdings ist die Frage, ob Sie alle Services auf Ihrer WordPress-Seite auch wirklich benötigen. Alternativ können Sie auch andere Kartendienste, wie zum Beispiel Open Street Map nutzen. Zum Artikel: Alternativen zu Google Maps. Oft sind diese kostenlos und bieten ebenfalls ein breites Spektrum an Optionen und Gestaltungs-Varianten.
Quellen:
CHIP – WordPress: Google Maps einbinden – so geht’s
CCDM – WordPress und Google Maps – Wie Sie Karten reibungslos in Ihre Website einbinden
Bild von Deepanker Verma auf Pixabay
- Social Media Storytelling – So geht’s! - 13. März 2023
- 5 Google-Maps-Alternativen: für jeden Zweck die richtige Map! - 25. Februar 2023
- Der ultimative Snapchat Geofilter-Guide - 21. Februar 2023
Danke für den Artikel! Hat mir sehr geholfen.
Wie genial, dass es Leute gibt, die sich die Mühe machen, solch hilfreiche Anleitungen ins Netz zu stellen. Vielen Dank. Hat mir sehr geholfen!
Endlich mal ein guter Artikel zu dem Thema. Habe lange nach einer Lösung gesucht.
Für mich war das nicht so leicht 🙂
Sehr hilfreicher Artikel. Vielen Dank. Jetzt klappts mit dem Google Maps auf unserer Webseite.
Sehr Hilfreich weiter so.
Eine gute Zusammenfassung der Möglichkeiten, nach der ich schon länger gesucht habe.
Auch wenn der Artikel schon etwas älter ist, hat er mir sehr geholfen! Danke euch!
Danke für den tollen Artikel! Das erklärt Google Maps sehr einfach für Webseiten/ Webprojekte.
wie sieht es in Sachen Datenschutz aus. Ich kann mir speziell bei externen Inhalten wie Google Maps nicht vorstellen, dass man es so simpel einbauen kann. Bei YouTube hatte man zwar noch die nocookie Einstellung. Aber problemlos einbinden konnten man es so simpel dann doch wieder nicht. Kann das Plugin den Datenschutz garantieren?
Vielen Dank für die Erklärung, es hat auch bei uns funktioniert!
Danke!!!. Es ist hilfreichlishes article für meinem website. I hoffe, dass ich einstellungen überwinden. =)
Danke für den Artikel, hat uns sehr geholfen 🙂
Super, kurze Recherche und schon alles geklärt. Die schnelle Lösung über den IFRAME.
Danke für den Artikel und die Informationen.
Viele Grüße
Mike
richtig einfach und verständlich erklärt. Danke
Einfach und verständlich umgesetzt, vielen Dank für die Hilfe.
Zwar tauchte die Frage bzgl. DSGVO hier schon mal auf. Aktuell aber wird es wohl eine neue Vereinbarung mit den USA geben. Weiss jemand ob dadurch der Einsatz wieder „legitim“ ist? Abgesehen davon muss man wohl einen AV-Vertrag unterschreiben und etwas in die Datenschutzerklärung auf der Website integrieren. Hier hab ich hier was gefunden:
https://devowl.io/de/2021/google-maps-website-einbinden/
Die Frage ist nun: Ändert sich durch die Vereinbarung mit den USA etwas in der Hinsicht oder ist es nun wie in dem Artikel beschrieben wieder einsetzbar? Wobei man sicher warten muss, bis die Vereinbarung unterschrieben ist. Und Klagen dagegen wird es sicherlich auch wieder geben und ich hoffe mal, dass es diese Mal dann nicht wieder gekippt wird, zum dritten Mal…
Ich bin etwas unsicher und verzweifelt, da Kunden fragen, ich kein Anwalt bin, aber Google Maps komplett rausnehmen finden die Kunden dann auch wieder keinen guten Vorschlag. Ihr kennt das sicherlich auch oder?
Sehr einfach erklärt. Hat mir echt weitergeholfen
Liebe Grüße
Robin
Danke Danke Danke, So eine Anleitung habe ich gesucht. Wer sucht wird fündig.
Danke für den hilfreichen Artikel und die ausführliche Erklärung!
Die Erklärung ist gut und sachlich aufgebaut. Es macht immer wieder Spass eure Beiträge zu lesen.
Danke das hat mir sehr geholfen
Tolle Anleitung. Die Einbindung über iFrame ist auch eine gute Möglichkeit, ohne einen Key zu brauchen.