Wie integriere ich Google Maps in meine Website?

Google Maps lässt sich auf unterschiedliche Weise in eine Website integrieren: vom einfachen Karten-Embed bis zur individuell programmierten Standortsuche mit Routenberechnung, Places-Daten und 3D-Ansichten. Welche Lösung sinnvoll ist, hängt davon ab, wie stark du die Karte anpassen möchtest, welche Daten du anzeigen willst und wie viel Entwicklungsaufwand vertretbar ist.

Seit 2025 und 2026 hat Google mehrere zentrale Bereiche der Maps Platform geändert. Dazu gehören das Preismodell, neue EWR-Regeln für Places-Daten, neue Routing-Klassen, die Umstellung auf Advanced Markers und das Ende des bisherigen Heatmap Layers. Dieser Beitrag zeigt dir den aktuellen Stand und erklärt, wie du Google Maps technisch sauber, kostenbewusst und datenschutzfreundlich einbindest.

Das Wichtigste in Kürze

• Einfachste Lösung: Für eine normale Standortkarte reicht häufig ein von Google Maps erzeugter iframe-Embed. Dafür ist kein eigener JavaScript-Code notwendig.
• Individuelle Karten: Für eigene Marker, Interaktionen, Standortsuche oder ein angepasstes Design ist die Maps JavaScript API die richtige Basis.
• Aktuelle Kostenlogik: Das frühere pauschale monatliche 200-US-Dollar-Guthaben gibt es seit dem 1. März 2025 nicht mehr. Stattdessen gelten kostenlose monatliche Nutzungsgrenzen je SKU.
• Routing: Distance Matrix API und Directions API beziehungsweise ihre alten JavaScript-Services sind Legacy. Für neue Projekte solltest du die Routes API sowie die Klassen Route und RouteMatrix einplanen.
• Marker: google.maps.Marker ist deprecated. Für neue Umsetzungen empfiehlt Google AdvancedMarkerElement.
• EWR-Regeln: Seit dem 8. Juli 2025 gelten für Projekte mit EWR-Abrechnungskonto besondere Vorgaben für Places-Daten. Wenn Places-Inhalte zusammen mit einer Karte angezeigt werden sollen, ist das Places UI Kit besonders relevant.
• Datenschutz: Externe Karten sollten in Deutschland nicht unkontrolliert schon beim Seitenaufruf Daten an Google übertragen. Eine Consent- oder Zwei-Klick-Lösung ist für viele Websites die praktikabelste Umsetzung.

Welche Google-Maps-Integration passt zu deiner Website?

Nicht jede Website braucht die vollständige Google Maps Platform. Für einen einzelnen Unternehmensstandort ist eine einfache Einbettung meist ausreichend. Erst wenn Nutzer suchen, filtern, Routen berechnen oder mehrere Standorte interaktiv erkunden sollen, lohnt sich die API-Integration.

Google Maps ohne eigene API-Programmierung einbetten

Variante 1: Karte direkt aus Google Maps per iframe einbetten

Für eine klassische Kontakt- oder Standortseite ist der von Google Maps bereitgestellte Embed-Code häufig die sinnvollste Lösung. Öffne Google Maps am Desktop, suche den gewünschten Ort und wähle „Teilen“ beziehungsweise „Karte einbetten“. Anschließend kopierst du den bereitgestellten HTML-Code und fügst ihn in deine Website ein.

Diese Variante eignet sich besonders dann, wenn du lediglich einen Standort zeigen und Nutzern die Orientierung erleichtern möchtest. Ein eigener API-Schlüssel oder JavaScript-Code ist für den direkt aus Google Maps kopierten Embed-Code normalerweise nicht notwendig. Eigene Markerlogik, komplexe Filter oder ein vollständig individuelles Kartenlayout sind damit allerdings nicht vorgesehen.   

Variante 2: Maps Embed API

Die Maps Embed API ist eine offizielle Google Maps Platform API für einfache iframe-Einbettungen. Sie unterstützt unter anderem Place-, View-, Directions-, Search- und Street-View-Modi. Laut aktueller Google-Preisliste ist die Embed-SKU ohne Gebühren und mit unbegrenzter Nutzung verfügbar. Trotzdem benötigst du für die API ein Google-Cloud-Projekt, einen gültigen API-Schlüssel und ein hinterlegtes Abrechnungskonto.

Diese Lösung ist sinnvoll, wenn du die Einbettung technisch kontrollierter aufbauen möchtest, aber keine vollständige Maps-JavaScript-Anwendung brauchst.

Technische Grundlagen der Google Maps Platform

Sobald du APIs wie Maps JavaScript, Static Maps, Places oder Routes verwendest, arbeitest du mit einem Google-Cloud-Projekt. Dort aktivierst du die benötigten Dienste, hinterlegst die Abrechnung und erstellst Zugangsdaten. Welche API du benötigst, richtet sich nach dem konkreten Anwendungsfall.

• Maps JavaScript API: Interaktive Karten mit eigenen Markern, Overlays, Events und Kartensteuerung.
• Maps Static API: Statische Kartenbilder für Seiten, E-Mails oder Anwendungen ohne Interaktion.
• Places API (New): Suche, Place Details, Fotos, Autocomplete und weitere Informationen zu Orten.
• Geocoding API: Umwandlung zwischen Adressen und geografischen Koordinaten.
• Routes API beziehungsweise Routes Library: Routen, Fahrtzeiten und Distanzmatrizen.
• Street View: Panorama- und Straßenansichten, je nach Produkt statisch oder interaktiv.
• 3D Maps: Fotorealistische und interaktive 3D-Kartenerlebnisse für fortgeschrittene Anwendungen.

API-Schlüssel richtig absichern

Ein API-Schlüssel ist bei clientseitigen Maps-Anwendungen sichtbar. Das ist technisch normal. Entscheidend ist deshalb nicht, den Schlüssel „zu verstecken“, sondern seine Nutzung konsequent einzuschränken. Google empfiehlt sowohl Anwendungsbeschränkungen als auch API-Beschränkungen.

• Beschränke Website-Schlüssel auf die erlaubten HTTP-Referrer beziehungsweise Domains.
• Erlaube dem Schlüssel nur die APIs, die das Projekt tatsächlich benötigt.
• Nutze getrennte Schlüssel für unterschiedliche Anwendungen oder Umgebungen, zum Beispiel Produktion und Test.
• Prüfe die Nutzung regelmäßig und richte Quotas sowie Abrechnungswarnungen ein.
• Für unterstützte Maps-Dienste kann Firebase App Check zusätzlichen Schutz gegen missbräuchliche Requests bieten.

Google Maps Kosten 2026: So funktioniert das aktuelle Preismodell

Seit dem 1. März 2025 verwendet Google Maps Platform nicht mehr das frühere pauschale monatliche Guthaben von 200 US-Dollar. Stattdessen hat jede zentrale SKU eine eigene kostenlose monatliche Nutzungsgrenze. Danach wird nach Nutzung abgerechnet; bei höheren Volumina greifen automatische Mengenrabatte.

Bei Places, Routes, Geocoding und weiteren Diensten unterscheiden sich kostenlose Kontingente und Preise je nach SKU. Besonders bei Places können zudem die angeforderten Datenfelder beeinflussen, welche SKU abgerechnet wird. Prüfe deshalb vor dem Launch die aktuelle Preisliste und die tatsächlichen Requests deiner Anwendung.

Maps JavaScript API integrieren: Schritt für Schritt

Für eine individuell gestaltete Karte mit eigenen Markern, Interaktionen oder Standortfunktionen ist die Maps JavaScript API die zentrale Lösung. Der folgende Ablauf zeigt eine moderne Grundkonfiguration.

1. Google-Cloud-Projekt erstellen oder ein bestehendes Projekt auswählen.
2. Abrechnung für das Projekt aktivieren.
3. Maps JavaScript API und nur die zusätzlich benötigten APIs aktivieren.
4. API-Schlüssel erstellen und auf die eigene Domain sowie die benötigten APIs beschränken.
5. Für Advanced Markers beziehungsweise Cloud-based Maps Styling eine Map ID anlegen.
6. Karte und benötigte Bibliotheken laden und anschließend die gewünschte Logik implementieren.

Aktuelles Codebeispiel mit Advanced Marker

Ältere Beispiele verwenden häufig noch google.maps.Marker. Diese Klasse ist seit Februar 2024 deprecated. Für neue Implementierungen solltest du AdvancedMarkerElement nutzen. Das folgende vereinfachte Beispiel zeigt eine Karte mit einem Marker für Hamburg:

Google bietet zusätzlich Dynamic Library Import und den NPM Loader an. Für größere Anwendungen ist das modulare Laden über importLibrary() sinnvoll, weil Bibliotheken erst dann angefordert werden können, wenn sie tatsächlich benötigt werden.

Karten gestalten: Cloud-based Maps Styling statt alter Styling-Workflows

Für ein einheitliches Corporate Design kannst du Farben, Labels, Points of Interest und weitere Kartenelemente über Cloud-based Maps Styling verwalten. Die Styles werden in der Google Cloud Console erstellt und über eine Map ID mit der Anwendung verbunden. Dadurch lassen sich Designänderungen veröffentlichen, ohne den Anwendungscode jedes Mal anzupassen.

Seit Mai 2026 ist auch das JSON-Schema für cloudbasierte Kartenstile allgemein verfügbar. Außerdem unterstützt das Cloud Styling inzwischen weitere Kartentypen einschließlich 3D-Roadmap-Szenarien. Für neue Projekte ist Cloud-based Maps Styling daher in vielen Fällen die wartungsfreundlichere Variante als hart codierte Styling-Regeln.

Routen und Entfernungen: Welche API ist 2026 aktuell?

Viele ältere Tutorials empfehlen noch die Distance Matrix API, Directions API oder die JavaScript-Objekte DirectionsService und DistanceMatrixService. Diese Lösungen gehören inzwischen zum Legacy-Bereich. Für neue Projekte solltest du die aktuelle Routes API beziehungsweise die Routes Library der Maps JavaScript API einplanen.

• Route: Berechnet Routen zwischen Start, Ziel und optionalen Zwischenstopps und kann Verkehrs- oder alternative Routendaten liefern.
• RouteMatrix: Berechnet Distanzen und Fahrzeiten zwischen mehreren Start- und Zielpunkten und ersetzt den alten Distance Matrix Service.

Seit Februar 2026 ist DirectionsService in der Maps JavaScript API ausdrücklich deprecated. Bestehende Anwendungen funktionieren weiter, sollten aber bei einer technischen Überarbeitung auf die neue Routes Library migriert werden.

Places-Daten und Google-Bewertungen: EWR-Regeln beachten

Die Places API (New) liefert unter anderem Adressen, Telefonnummern, Öffnungszeiten, Bewertungen, Fotos, Suchergebnisse und Autocomplete-Funktionen. Für Unternehmen mit Abrechnungsadresse im Europäischen Wirtschaftsraum gelten seit dem 8. Juli 2025 jedoch besondere Google Maps Platform EEA Terms.

Wichtig für neue oder wesentlich veränderte Integrationen: Google weist darauf hin, dass Places-Inhalte aus der Places API nicht mehr ohne Weiteres gemeinsam mit einer Karte dargestellt werden dürfen. Wenn Places-Daten zusammen mit einer Karte angezeigt werden sollen, ist das Places UI Kit die von Google vorgesehene Lösung. Es stellt fertige UI-Komponenten für Place Details und weitere Places-Funktionen bereit.

Bei eigener Ausgabe von Places-Daten musst du außerdem die jeweils geltenden Attribution-, Caching- und Nutzungsbedingungen prüfen. Das gilt besonders für Bewertungen, Fotos und andere von Google bereitgestellte Inhalte. Für EWR-Projekte sollte deshalb vor der Umsetzung geklärt werden, welche Darstellungsform für den konkreten Use Case zulässig ist.

Heatmaps: wichtige Änderung seit Maps JavaScript API 3.65

Der frühere Heatmap Layer der Maps JavaScript API wurde 2025 deprecated und ist seit Version 3.65 nicht mehr verfügbar. Neue Projekte sollten daher nicht mehr auf google.maps.visualization.HeatmapLayer setzen. Google nennt unter anderem Drittanbieter-Integrationen wie deck.gl als mögliche Alternative für Heatmap-Visualisierungen.

3D Maps und Street View für anspruchsvolle Anwendungen

Für Immobilien, Tourismus, Stadtplanung oder umfangreiche Standortanwendungen können 3D- und Street-View-Funktionen zusätzlichen Mehrwert bieten. 3D Maps in der Maps JavaScript API ermöglicht fotorealistische 3D-Umgebungen, eigene Marker, Linien, Kameraanimationen und zunehmend auch cloudbasierte Gestaltung.

Einige 3D-Schnittstellen oder Funktionen können weiterhin an bestimmte Release-Kanäle wie Beta gebunden sein. Prüfe deshalb vor einem produktiven Einsatz den aktuellen Status der jeweils verwendeten Klasse. Für einfache Standortseiten ist 3D in der Regel nicht notwendig und erhöht Entwicklungsaufwand sowie Datenmenge.

Standort des Nutzers anzeigen: Browser-Geolocation verwenden

Wenn eine Website den aktuellen Standort eines Nutzers auf einer Karte anzeigen soll, empfiehlt Google für Browseranwendungen die W3C-Geolocation über navigator.geolocation. Der Browser fragt den Nutzer dabei ausdrücklich nach der Standortfreigabe. Die Funktion steht nur in sicheren Kontexten, also üblicherweise über HTTPS, zur Verfügung.

Fordere die Standortfreigabe erst an, wenn sie für die konkrete Funktion erforderlich ist – beispielsweise nach einem Klick auf „Standort verwenden“. Das verbessert Transparenz und Nutzererlebnis.

Datenschutz und DSGVO: Google Maps datenschutzfreundlich einbinden

Beim Laden externer Google-Maps-Inhalte können technische Informationen wie IP-Adresse, Geräte- und Browserdaten sowie je nach Funktion Standortinformationen an Google übermittelt werden. Welche Rechtsgrundlage erforderlich ist, hängt von der konkreten Einbindung und Datenverarbeitung ab. Eine pauschale Aussage, jede Google-Maps-Nutzung sei immer nur mit Einwilligung zulässig, wäre deshalb zu kurz gegriffen.

Für viele deutsche Websites ist eine Consent- beziehungsweise Zwei-Klick-Lösung dennoch die praktikabelste und datenschutzfreundlichste Variante: Die Karte wird zunächst durch einen lokalen Platzhalter ersetzt und erst geladen, nachdem der Nutzer die externe Karte aktiv freigegeben hat.

Praktische Datenschutz-Maßnahmen

• Externe Karten bis zur Freigabe blockieren: Verhindere, dass iframe oder Maps-Skripte schon beim ersten Seitenaufruf geladen werden.
• Zwei-Klick-Lösung anbieten: Zeige einen Platzhalter mit kurzer Erklärung und einem Button wie „Google Maps laden“.
• Consent Management sauber konfigurieren: Lösungen wie Borlabs Cookie, Usercentrics oder andere CMPs können externe Inhalte erst nach Freigabe nachladen.
• Datenschutzerklärung aktualisieren: Beschreibe Anbieter, Zweck, verarbeitete Daten, Empfänger, mögliche Drittlandübermittlungen und Widerrufsmöglichkeiten.
• Standortzugriff getrennt behandeln: Browser-Geolocation benötigt eine eigene Berechtigungsabfrage des Browsers und sollte nur bei tatsächlichem Bedarf ausgelöst werden.

Für Datenübermittlungen in die USA besteht weiterhin der EU-US Data Privacy Framework-Angemessenheitsbeschluss der Europäischen Kommission. Google LLC erklärt, nach dem EU-US Data Privacy Framework zertifiziert zu sein. Je nach Verarbeitung können daneben weitere Transfermechanismen relevant sein. Die konkrete datenschutzrechtliche Bewertung sollte im Zweifel mit dem Datenschutzbeauftragten oder einer Rechtsberatung abgestimmt werden.

Performance und SEO: Google Maps ohne unnötige Ladezeit integrieren

Eine Karte kann mehrere externe Ressourcen laden und dadurch die Seitengeschwindigkeit beeinflussen. Aus SEO- und UX-Sicht solltest du Google Maps deshalb nur dort laden, wo die Karte tatsächlich einen Mehrwert bietet.

• Karte nicht als Largest Contentful Paint einplanen: Der wichtigste sichtbare Inhalt sollte unabhängig von Google Maps schnell erscheinen.
• Lazy Loading verwenden: iframe-Karten können mit loading=”lazy” später geladen werden.
• Platz reservieren: Feste Höhe oder aspect-ratio verhindert Layout-Verschiebungen und verbessert den CLS.
• APIs nur auf benötigten Seiten laden: Eine Standortkarte auf der Kontaktseite muss nicht sitewide im Header eingebunden werden.
• Bibliotheken gezielt laden: Mit importLibrary() lassen sich zusätzliche Maps-Bibliotheken erst bei Bedarf nachladen.
• Wichtige Standortinformationen als HTML bereitstellen: Adresse, Öffnungszeiten und Kontaktinformationen sollten nicht ausschließlich in der Karte stehen.

Eine Google-Maps-Einbettung ist kein direkter Ersatz für lokale SEO-Maßnahmen. Für die Auffindbarkeit eines Unternehmens sind weiterhin eine saubere Standortseite, konsistente Unternehmensdaten, ein gepflegtes Google Unternehmensprofil und relevante strukturierte Daten entscheidend.

Typische Fehler bei der Google-Maps-Einbindung

Häufige Fragen zur Google-Maps-Integration

Ist Google Maps auf der Website kostenlos?

Das hängt von der Einbindungsart ab. Ein einfacher Google-Maps-Embed und die Maps Embed API können ohne nutzungsabhängige Gebühren verwendet werden. Andere Google Maps Platform APIs haben kostenlose monatliche Kontingente und werden nach deren Überschreitung abgerechnet.

Brauche ich immer einen API-Schlüssel?

Nein. Ein direkt aus Google Maps kopierter iframe-Embed kann ohne selbst verwalteten API-Key eingebunden werden. Für Google Maps Platform APIs wie Maps JavaScript, Maps Embed API, Static Maps, Places oder Routes ist dagegen eine Authentifizierung über API-Key oder – bei bestimmten serverseitigen Szenarien – andere unterstützte Verfahren notwendig.

Ist Google Maps DSGVO-konform?

Google Maps kann datenschutzkonform eingesetzt werden, wenn die konkrete technische Einbindung, Rechtsgrundlage, Transparenzpflichten und gegebenenfalls das Consent Management korrekt umgesetzt sind. Eine Zwei-Klick- oder CMP-Lösung ist für viele deutsche Websites eine praktikable Variante, um externe Inhalte erst nach Freigabe zu laden.

Was ersetzt die Distance Matrix API?

Für neue Implementierungen empfiehlt Google die Routes API. In der Maps JavaScript API übernimmt die RouteMatrix-Klasse die Berechnung von Distanzen und Fahrzeiten zwischen mehreren Start- und Zielpunkten.

Kann ich Google-Bewertungen auf meiner Website anzeigen?

Places-Daten können je nach Dienst und Region eingebunden werden. Für Projekte mit EWR-Abrechnungskonto gelten seit Juli 2025 besondere Bedingungen. Prüfe insbesondere, ob für die gewünschte Darstellung das Places UI Kit eingesetzt werden sollte und welche Attribution- und Nutzungsregeln gelten.

Hanseranking – dein Partner für digitale Sichtbarkeit

Hanseranking unterstützt kleine und mittlere Unternehmen dabei, ihre digitale Sichtbarkeit strukturiert auszubauen. Von technischer SEO und Content über Google Ads bis hin zu Tracking und Conversion-Optimierung entwickeln wir Lösungen, die zu den Zielen und Ressourcen des Unternehmens passen.

• SEO: Technische und inhaltliche Optimierung für mehr relevante organische Sichtbarkeit.
• Google Ads: Strategische Kampagnen, sauberes Conversion-Tracking und laufende Optimierung.
• Tracking und Analytics: GA4, Google Tag Manager und datenschutzbewusste Messkonzepte.
• Content und UX: Inhalte und Seitenstrukturen, die Nutzerbedürfnisse und Suchintention zusammenbringen.

Du möchtest Google Maps, Tracking oder andere externe Dienste technisch sauber in deine Website integrieren? Wir unterstützen dich bei der Auswahl und Umsetzung einer passenden Lösung.

Fazit: Google Maps 2026 passend zum Anwendungsfall integrieren

Google Maps lässt sich auch 2026 flexibel in Websites integrieren – entscheidend ist die Wahl der richtigen Lösung. Für eine einfache Standortdarstellung reicht meist ein iframe. Für individuelle Karten, Standortsuche oder eigene Interaktionen ist die Maps JavaScript API die bessere Wahl. Routing sollte auf Routes API beziehungsweise Route und RouteMatrix basieren; bei Places-Daten müssen insbesondere EWR-Projekte die seit Juli 2025 geltenden Bedingungen beachten.

Achte zusätzlich auf API-Key-Sicherheit, Quotas, Performance und eine datenschutzfreundliche Lade-Logik. So bleibt die Karte funktional, kalkulierbar und technisch zukunftssicher, ohne unnötig Ladezeit oder rechtliche Risiken zu erzeugen.