Google Maps in WordPress einbinden – Schritt für Schritt erklärt (2026)

Junge Frau mit roter Mütze betrachtet eine Landkarte – sinnbildlich für Google Maps in WordPress

Google Maps in WordPress gehört zu den beliebtesten Tools, um Standorte auf einer Website zu visualisieren. Wer eine Karte in WordPress einbinden möchte, stößt jedoch schnell auf technische Hürden und rechtliche Pflichten. Seit 2018 ist ein API-Key verpflichtend. Abgerechnet wird nach Nutzung. Und aus DSGVO-Sicht darf Google Maps erst nach aktiver Zustimmung der Nutzer geladen werden.

In dieser Anleitung zeigen wir Schritt für Schritt, wie Du Google Maps in WordPress einbinden kannst. Technisch sauber, rechtlich sicher und flexibel erweiterbar. Du erfährst, wie Du die API korrekt konfigurierst, Karten per Snippet oder Plugin integrierst und was es kostet, wenn die Karte häufiger aufgerufen wird als gedacht. Außerdem stellen wir Alternativen wie OpenStreetMap, Mapbox oder HERE vor – für alle, die Wert auf Datenschutz, Kontrolle oder geringere Kosten legen.

Dieser Beitrag richtet sich an Entscheider, die ihre Website als Werkzeug verstehen. Und an alle, die sich auf eine WordPress Agentur verlassen wollen, die Klartext spricht: technisch fundiert, datenschutzbewusst und ohne unnötige Abhängigkeiten.

Warum Google Maps nicht mehr kostenlos ist

Google Maps galt lange als kostenloses Tool für Websites. Das hat sich grundlegend geändert. Seit Juli 2018 verlangt Google einen API-Schlüssel und ein aktiviertes Abrechnungskonto – selbst dann, wenn die Nutzung innerhalb des kostenlosen Kontingents bleibt.

Zum 1. März 2025 hat Google das Preismodell erneut angepasst. Statt pauschal 200 Dollar Guthaben pro Monat gelten nun Freikontingente pro API. Für interaktive Karten (Maps JavaScript API) sind 10.000 Aufrufe im Monat kostenlos. Jeder weitere Zugriff kostet rund 7 Dollar pro 1.000 Kartenladungen. Auch für andere Funktionen wie Routenplanung oder Places-API fallen teils deutlich höhere Gebühren an. Google bestätigt die Änderung im offiziellen Developer Blog: „We’ve replaced the USD $200 monthly recurring credit with a free monthly usage threshold for each Core Services SKU.“

Die Einbindung per iframe, wie sie über die Teilen-Funktion in Google Maps erzeugt wird, bleibt technisch kostenlos. Allerdings ist der Funktionsumfang stark eingeschränkt. Und auch beim iframe gilt: Datenschutzrechtlich handelt es sich um eine Drittanbieter-Einbindung mit IP-Übertragung. Eine Einwilligung ist also trotzdem notwendig.

Für Unternehmen bedeutet das: Google Maps ist nicht mehr einfach ein Gratis-Tool, sondern ein Dienst mit Nutzungsgrenzen, Kostenrisiken und Compliance-Anforderungen. Wer auf Nummer sicher gehen will, muss das Preismodell verstehen, die API begrenzen und eine Einwilligungslösung einbauen. Alternativen sind verfügbar, aber auch sie bringen eigene Anforderungen mit.

Datenschutz & DSGVO: Darauf musst Du achten

Die Einbindung von Google Maps ist nicht nur eine technische Frage, sondern auch ein datenschutzrechtliches Thema. Beim Laden einer Google-Karte werden personenbezogene Daten übertragen – insbesondere die IP-Adresse der Nutzer. Zusätzlich setzt Google Cookies wie NID, die unter anderem für Werbezwecke verwendet werden.

Nach geltender Rechtslage in der EU, insbesondere seit dem Urteil des Europäischen Gerichtshofs zur Cookie-Einwilligung (C-673/17), dürfen solche Inhalte erst nach aktiver Zustimmung angezeigt werden. Das gilt auch dann, wenn die Karte „nur zur Orientierung“ dient. Google ist ein Drittanbieter mit Sitz in den USA, was datenschutzrechtlich als Drittland zählt.

Wer Google Maps in WordPress einbindet, muss also sicherstellen, dass die Karte erst nach einer informierten Einwilligung des Nutzers geladen wird. Die klassische Lösung dafür ist ein sogenannter Zwei-Klick-Mechanismus: Erst wenn der Nutzer aktiv zustimmt, wird die Karte geladen und die Verbindung zu Google aufgebaut.

Ohne diese Absicherung drohen rechtliche Risiken – von Abmahnungen bis zu Bußgeldern. Viele Consent-Management-Tools wie Borlabs Cookie oder Complianz bieten fertige Content-Blocker für Google Maps an. Wichtig ist, dass die Zustimmung vor dem Laden der Karte erfolgt und dokumentiert wird. Ein bloßer Hinweis in der Datenschutzerklärung reicht nicht aus.

Mehr zur rechtssicheren Umsetzung findest Du in unserem DSGVO-Leitfaden für WordPress.

Google Maps ohne Plugin einbinden

Wer keine zusätzlichen Plugins nutzen möchte, kann Google Maps auch direkt per Code in WordPress einbauen. Das ist schlank und flexibel, erfordert aber etwas mehr technisches Verständnis. Voraussetzung ist ein gültiger API-Key und ein aktiviertes Google-Cloud-Projekt.

API-Key erstellen und absichern

  1. Rufe die Google Cloud Console auf.
  2. Lege ein neues Projekt an oder wähle ein bestehendes.
  3. Aktiviere die Maps JavaScript API unter „APIs & Dienste“.
  4. Erstelle einen API-Schlüssel und beschränke ihn auf:
    • Deine Domain (HTTP-Referer z. B. https://deine-domain.de/*)
    • Die benötigte API (z. B. Maps JavaScript API)
  5. Aktiviere die Abrechnung – auch für kostenlose Nutzung ist das Pflicht.

Tipp: Lege in der Cloud Console ein Tageslimit für API-Aufrufe fest. So schützt Du Dich vor unerwarteten Kosten durch falsche Konfigurationen oder Fremdzugriffe.

Karte per JavaScript einfügen

Füge den folgenden Code in einen HTML-Block oder in Dein Theme ein:

<div id="map" style="width:100%; height:400px;"></div>
<script async 
  src="https://maps.googleapis.com/maps/api/js?key=DEIN_API_KEY&callback=initMap">
</script>
<script>
  function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 48.137, lng: 11.575 }, // Beispiel: München
      zoom: 14
    });
    new google.maps.Marker({
      position: { lat: 48.137, lng: 11.575 },
      map: map,
      title: "Unser Standort"
    });
  }
</script>

Die Karte zeigt den gewünschten Ort samt Marker. Passe die Koordinaten nach Bedarf an. Wichtig: Ohne gültigen API-Key wird die Karte nicht geladen.

Datenschutz beachten

Der obige Code lädt Google Maps sofort beim Seitenaufruf. Um DSGVO-konform zu bleiben, solltest Du das Script nur dann laden, wenn Nutzer vorher aktiv zugestimmt haben. Alternativ kannst Du mit einem Content-Blocker oder einer Zwei-Klick-Lösung arbeiten – etwa über Borlabs Cookie, siehe nächster Abschnitt.

Alternative: Karte per iframe einbinden

Die einfachste Möglichkeit ist ein eingebettetes Google-Maps-iframe. Diese Variante benötigt keinen API-Key und funktioniert ohne JavaScript.

So funktioniert’s:

  1. Öffne Google Maps, suche Deinen Standort.
  2. Klicke auf „Teilen“ > „Karte einbetten“.
  3. Kopiere den iframe-Code und füge ihn in WordPress als HTML-Block ein.

Beispiel:

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

Wichtig: Auch das iframe lädt Inhalte direkt von Google-Servern und überträgt dabei personenbezogene Daten. Aus DSGVO-Sicht ist daher auch hier eine Einwilligung vor dem Laden erforderlich. Setze also entweder einen Content-Blocker (z. B. via Borlabs) oder greife auf ein Zwei-Klick-Pattern zurück.

Google Maps mit Plugin einbinden (inkl. DSGVO-Funktionen)

Wenn Du lieber auf fertige Lösungen setzen willst, kannst Du Google Maps auch über spezialisierte Plugins in WordPress integrieren. Der Vorteil: Viele dieser Tools bringen bereits eine grafische Oberfläche, Shortcodes und DSGVO-Funktionen mit.

WP Go Maps

Eines der meistgenutzten Plugins für Google Maps in WordPress. Es bietet:

  • Integration per Gutenberg-Block oder Shortcode
  • Unterstützung für mehrere Marker, Routen, Kategorien
  • Eingebaute Zwei-Klick-Lösung für DSGVO-Compliance

In den Einstellungen kannst Du festlegen, dass Karten erst nach Zustimmung des Nutzers geladen werden. Der Hinweistext („Google Maps wurde blockiert …“) lässt sich individuell anpassen. Die Funktion ist standardmäßig aktiviert und sollte nur bei Vorliegen anderer Consent-Systeme deaktiviert werden.

WP Go Maps unterstützt auch OpenStreetMap. Wer vollständig auf Google verzichten will, kann auf diese Option umstellen – ganz ohne API-Key.

MapPress Maps for WordPress

MapPress ist ein leichtgewichtiges Plugin, das sowohl Google Maps als auch OpenStreetMap unterstützt. Es integriert sich direkt in den Editor und erlaubt Dir, Karten pro Beitrag oder Seite zu erstellen.

Anders als WP Go Maps bringt es keine eigene DSGVO-Absicherung mit. Wenn Du Google Maps auswählst, musst Du also zusätzlich ein Tool wie Borlabs Cookie einsetzen, um die Karte vorab zu blockieren. Entscheidest Du Dich für OSM, ist zumindest kein API-Key notwendig – aber auch hier wird eine Verbindung zu externen Servern aufgebaut.

DSGVO-konforme Einbindung mit Borlabs Cookie

Google Maps darf erst geladen werden, wenn Besucher ausdrücklich zustimmen. Das schreibt die DSGVO vor, da beim Laden der Karte personenbezogene Daten wie IP-Adressen an Google-Server in den USA übertragen werden. Ein einfacher Hinweis in der Datenschutzerklärung reicht nicht aus.

Mit Borlabs Cookie lässt sich Google Maps technisch zuverlässig blockieren – und erst nach Zustimmung freigeben. Das Plugin bietet dafür einen sogenannten Content Blocker.

So funktioniert’s:

  1. Borlabs Cookie installieren und aktivieren
    Du findest es als Premium-Plugin unter borlabs.io.
  2. Content Blocker aktivieren
    Unter „Content Blocker“ findest Du bereits eine vorkonfigurierte Vorlage für Google Maps. Aktiviere diese und passe bei Bedarf den Hinweistext an.
  3. Karte einbinden wie gewohnt
    Nutze ein iframe oder ein Maps-Plugin. Borlabs erkennt die Google-Maps-Einbindung automatisch und zeigt stattdessen einen Hinweisblock.
  4. Einwilligung einholen
    Erst wenn Nutzer aktiv auf „Karte laden“ klicken, wird die Verbindung zu Google hergestellt. Die Zustimmung wird dokumentiert und bleibt erhalten, bis sie widerrufen wird.

Vorteile der Blockierung mit Borlabs

  • Keine API-Aufrufe oder Datenübertragung ohne Zustimmung
  • Flexible Gestaltung des Platzhalters (Text, Button, Vorschaubild)
  • Kompatibel mit allen gängigen Maps-Plugins
  • Rechtssichere Umsetzung für alle Drittanbieter-Inhalte

Wichtig

Lazy Loading reicht nicht aus. Ein iframe mit loading="lazy" verzögert zwar das Laden – verhindert aber nicht die Verbindung zu Google. Nur ein aktiver Content Blocker sorgt dafür, dass keine personenbezogenen Daten vorab übertragen werden.

Borlabs bietet auch Blocker für OpenStreetMap, Vimeo, YouTube und andere externe Dienste. So kannst Du Deine komplette Website DSGVO-konform absichern – nicht nur den Kartenteil.

DSGVO-konforme Einbindung mit Borlabs Cookie

Google Maps in WordPress darf erst geladen werden, wenn Besucher ausdrücklich zustimmen. Das schreibt die DSGVO vor, da beim Laden der Karte personenbezogene Daten wie IP-Adressen an Google-Server in den USA übertragen werden. Ein einfacher Hinweis in der Datenschutzerklärung reicht nicht aus.

Mit Borlabs Cookie lässt sich Google Maps technisch zuverlässig blockieren und erst nach Zustimmung freigeben. Das Plugin bietet dafür einen sogenannten Content Blocker.

So funktioniert’s:

  1. Borlabs Cookie installieren und aktivieren
    Du findest es als Premium-Plugin auf borlabs.io.
  2. Content Blocker aktivieren
    Unter „Content Blocker“ findest Du bereits eine vorkonfigurierte Vorlage für Google Maps. Aktiviere diese und passe bei Bedarf den Hinweistext an.
  3. Karte einbinden wie gewohnt
    Nutze ein iframe oder ein Maps-Plugin. Borlabs erkennt die Google-Maps-Einbindung automatisch und zeigt stattdessen einen Hinweisblock.
  4. Einwilligung einholen
    Erst wenn Nutzer aktiv auf „Karte laden“ klicken, wird die Verbindung zu Google hergestellt. Die Zustimmung wird dokumentiert und bleibt erhalten, bis sie widerrufen wird.

Vorteile der Blockierung mit Borlabs

  • Keine API-Aufrufe oder Datenübertragung ohne Zustimmung
  • Flexible Gestaltung des Platzhalters (Text, Button, Vorschaubild)
  • Kompatibel mit allen gängigen Maps-Plugins
  • Rechtssichere Umsetzung für alle Drittanbieter-Inhalte

Wichtig

Lazy Loading reicht nicht aus. Ein iframe mit loading="lazy" verzögert zwar das Laden, verhindert aber nicht die Verbindung zu Google. Nur ein aktiver Content Blocker sorgt dafür, dass keine personenbezogenen Daten vorab übertragen werden.

Borlabs bietet auch Blocker für OpenStreetMap, Vimeo, YouTube und andere externe Dienste. So kannst Du Deine komplette Website DSGVO-konform absichern, nicht nur den Kartenteil.

Google Maps Alternativen im Überblick

Nicht jede Website braucht Google Maps. Wer Wert auf Datenschutz, Kostenkontrolle oder Unabhängigkeit legt, sollte Alternativen prüfen. Drei Dienste haben sich im WordPress-Umfeld besonders bewährt: OpenStreetMap, Mapbox und HERE.

OpenStreetMap (OSM)

OpenStreetMap ist ein freies Kartenprojekt, das von einer weltweiten Community gepflegt wird. Es eignet sich gut für einfache Standortkarten oder Wegbeschreibungen.

Vorteile:

  • Keine API-Schlüssel oder Konten notwendig
  • Frei nutzbar, auch kommerziell
  • Datensparsam und ohne Tracking-Cookies

Nachteile:

  • Kein integrierter Routenplaner oder Places-Suche
  • Bei hoher Nutzung: IP-Adressen werden trotzdem übertragen
  • Technisch etwas aufwendiger als Google

In WordPress kannst Du OSM zum Beispiel mit MapPress oder dem Leaflet Map Plugin einbinden. Auch WP Go Maps unterstützt OSM ab Version 9.

Mapbox

Mapbox ist ein US-amerikanischer Anbieter für interaktive Karten. Die Plattform nutzt eigene Tiles, basiert aber teilweise auf OSM-Daten. Besonders stark ist Mapbox bei Design, Performance und mobilem Einsatz.

Vorteile:

  • Bis zu 50.000 Kartenladungen im Monat kostenlos
  • Moderne Technik mit Vektorkarten und Custom Styles
  • Gute Dokumentation und Entwicklerfreundlichkeit

Nachteile:

  • Hosting erfolgt in den USA
  • Verarbeitung personenbezogener Daten wie IP-Adressen
  • DSGVO-Einwilligung notwendig

Mapbox richtet sich primär an Entwickler. Die Integration in WordPress erfolgt meist über Leaflet.js mit Mapbox-Tiles oder eigene Snippets.

HERE

HERE ist ein Kartendienst aus Europa mit Wurzeln bei Nokia. Das Unternehmen betreibt eigene Server, legt Wert auf Datenschutz und bietet umfassende APIs für Karten, Geocoding und Navigation.

Vorteile:

  • Serverstandorte in Europa möglich
  • Günstiges Freikontingent (z. B. 250.000 Transaktionen pro Monat)
  • Kein Werbetracking

Nachteile:

  • Keine fertigen WordPress-Plugins
  • Technische Integration über eigene JavaScript-Bibliothek

HERE ist besonders für Unternehmen interessant, die Karten tief in eigene Prozesse integrieren oder volle Datenkontrolle wünschen. Für einfache Anwendungsfälle lohnt sich der Aufwand meist nicht.

Fazit

OpenStreetMap ist ideal für datensensible Websites mit einfachen Anforderungen. Mapbox überzeugt mit Design und Skalierbarkeit, braucht aber Zustimmung. HERE ist technisch stark und datenschutzfreundlich, aber anspruchsvoll in der Umsetzung.

Alle drei Alternativen können Google Maps ersetzen – vorausgesetzt, Du weißt genau, was Deine Website wirklich braucht.

Welche Lösung passt zu Deiner Website?

Nicht jede Website braucht dieselbe Kartenlösung. Entscheidend ist, wie viele Standorte Du zeigen willst, wie interaktiv die Karte sein soll und wie wichtig Dir Datenschutz und Wartbarkeit sind.

Google Maps ist nach wie vor die erste Wahl, wenn Du auf Bekanntheit, Zusatzfunktionen wie Routen oder Orte in der Nähe setzen willst. Aber: Du brauchst einen API-Key, ein Abrechnungskonto und eine saubere DSGVO-Einbindung.

OpenStreetMap eignet sich gut für einfache Standortanzeigen ohne Lizenzkosten. Ideal, wenn Dir Unabhängigkeit und Datenschutz wichtiger sind als Zusatzfunktionen.

Mapbox ist stark, wenn Du auf individuelles Kartendesign, Performance und Skalierbarkeit setzen willst. Die Technik ist moderner als bei Google, erfordert aber mehr Einarbeitung.

HERE bietet sich an, wenn Datenschutz höchste Priorität hat und Du mit einem europäischen Anbieter arbeiten willst – vorausgesetzt, die technische Integration schreckt Dich nicht ab.

Unser Tipp: Wenn Du nur eine einfache Karte auf Deiner Kontaktseite brauchst, reicht ein Plugin wie WP Go Maps mit aktivierter DSGVO-Funktion. Für komplexe Anforderungen lohnt sich ein prüfender Blick auf Mapbox oder HERE. Wichtig ist vor allem, dass die Karte rechtssicher eingebunden ist – mit API-Restriktionen, Consent-Mechanismus und klarer Datentransparenz.

Bild von Hendrik Luehrsen

Hendrik Luehrsen

Hendrik ist der Geschäftsführer der Agentur und leidenschaftlicher Gamer. Die meiste Zeit verbringt er jedoch als Bediensteter von Bürohund Emma.

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Du hast genug gelesen. Jetzt wird gebaut.

Lass uns dein WordPress Projekt starten

Wir verbinden technisches Know-how mit ehrlicher Beratung. Keine Floskeln, kein Theater. Schreib uns, und wir zeigen dir, wie WordPress richtig Wirkung entfaltet.