Google Maps auf jeder Website oder im digitalen Gästehandbuch einbinden
Erfahren Sie, wie Sie Google Maps per Iframe, JavaScript-API oder Tool einbinden. Inkl. API-Key-Einrichtung, responsivem Design und Datenschutz-Tipps.
Ein Gast schreibt Ihnen spät in der Nacht: „Die Adresse hat mich in die falsche Straße geführt.“ Sie prüfen die Buchungsdetails und stellen fest, dass der Name der Unterkunft in der Nähe mehrfach vorkommt. Die Adresse war technisch korrekt, aber für jemanden, der müde, im Dunkeln und ortsunkundig ankommt, war sie nicht hilfreich genug.
Hier spielt eine eingebettete Google Maps-Karte ihre Stärken aus. Eine Karte auf Ihrer Unterkunftsseite oder in Ihrem digitalen Gästehandbuch bietet Gästen visuelle Orientierung, zeigt nahegelegene Sehenswürdigkeiten und ermöglicht eine direkte Routenplanung in Google Maps, ohne dass die Adresse kopiert und eingefügt werden muss. Die Einbindung via Iframe ist in wenigen Minuten erledigt, doch eine zuverlässige Implementierung erfordert mehr als nur das Platzieren einer Karte. Mobiles Layout, Tastaturzugriff, Datenschutz, API-Sicherheit und die Art und Weise, wie Ihre Plattform mit HTML umgeht, beeinflussen, ob die Einbettung hilft oder den Gast frustriert.
Inhaltsverzeichnis
- Warum eingebettete Karten für Gastgeber wichtig sind
- Der schnellste Weg: Einbindung per Iframe
- Einrichtung des API-Keys und der Google Cloud-Abrechnung
- Den richtigen Einbettungsmodus wählen
- Responsive und barrierefreie Einbettung
- Datenschutz und Einwilligung
- Plattform-Tipps und häufige Fehler
Warum eingebettete Karten für Gastgeber wichtig sind
Die nützlichste Karte ist nicht unbedingt die komplexeste. Bei Kurzzeitvermietungen müssen Gäste meist schnell praktische Fragen beantworten: Ist das das richtige Gebäude? Wo ist der Eingang? Kann ich die Einfahrt finden? Wie nah ist die Unterkunft am Strand, Bahnhof, Supermarkt oder an der Flughafenroute?
Eine reine Textadresse beantwortet nur einen Teil dieser Probleme. Eine interaktive Karte erlaubt es dem Gast, die Umgebung zu erfassen, den Anfahrtsweg zu zoomen und die Navigation zu starten, wenn er bereit ist. Diese visuelle Bestätigung verhindert die typischen nächtlichen Anrufe, bei denen ein Gast trotz Nähe zur Unterkunft aufgrund mehrdeutiger Straßennamen oder unklarer Anweisungen nicht ans Ziel findet.
Google Maps existiert seit 2005 und verzeichnet laut Marktanalysen von 2026 weltweit über 2 Milliarden monatlich aktive Nutzer. Schätzungen gehen davon aus, dass über 1 Milliarde Menschen Google Maps monatlich nutzen, um Orte und Dienstleistungen zu finden. Diese Zahlen aus Google Maps Nutzungsstatistiken verdeutlichen, warum Gäste die Benutzeroberfläche sofort erkennen.
Karten unterstützen Momente, die Support-Anfragen erzeugen
Gastgeber können Karten nutzen, um:
- Die Ankunft zu erleichtern: Die Unterkunft im Verhältnis zu einem bekannten Wahrzeichen zeigen.
- Adressverwirrung zu reduzieren: Gästen einen visuellen Abgleich ermöglichen.
- Lokale Guides zu verbessern: Restaurants, Cafés, Attraktionen und Parkplätze markieren.
- Anleitungen zu zentralisieren: Die Karte direkt bei Check-in- und Parkinfos platzieren.
Ein digitales Gästehandbuch ist hier besonders nützlich, da der Gast Ortsinformationen, WLAN-Daten und Hausregeln auf derselben Seite abrufen kann. Ein Beispiel für dieses Format finden Sie in diesem Leitfaden zu digitalen Gästehandbüchern für Ferienunterkünfte.
Die Google Maps Embed API nutzt HTTP-Anfragen via Iframe und bietet fünf Modi: place (Ort), view (Ansicht), directions (Wegbeschreibung), streetview und search (Suche). Die standardisierte Struktur ermöglicht eine Einbindung ohne eigene Programmierung. Starten Sie bei einzelnen Unterkunftsseiten mit dem einfachsten Modus und erweitern Sie diesen nur, wenn es für den Gast einen Mehrwert bietet.
Der schnellste Weg: Einbindung per Iframe
Für einen einzelnen Standort ist das integrierte Google Maps-Tool am effizientesten. Sie müssen weder JavaScript schreiben noch komplexe Komponenten erstellen.
Öffnen Sie Google Maps, suchen Sie die Unterkunft und prüfen Sie das Ergebnis. Wenn die Adresse mehrdeutig ist, vergleichen Sie den Pin mit dem Eingang, Gebäude oder der Einfahrt, bevor Sie den Code kopieren.
Den generierten Einbettungscode kopieren
Gehen Sie wie folgt vor:
- Standort finden: Suchen Sie die vollständige Adresse in Google Maps.
- Teilen-Optionen öffnen: Wählen Sie Teilen im Standortmenü.
- Einbetten-Tab wählen: Klicken Sie auf Karte einbetten.
- Größe wählen: Wählen Sie ein Format und klicken Sie auf HTML kopieren.
- Iframe einfügen: Fügen Sie den Code in das HTML-Feld Ihrer Website ein.
- Veröffentlichen und testen: Prüfen Sie die Darstellung auf Smartphone und Desktop.
Der generierte Iframe enthält alle Google-Steuerelemente. Das ist für Kontaktseiten oder Karten in Gästehandbüchern meist ausreichend. Die Grenzen: Keine individuellen Marker oder komplexes Design. Der Code nutzt oft feste Pixelwerte, was auf Handys zu Problemen führen kann. Ändern Sie die Breite auf 100%, aber achten Sie darauf, dass der übergeordnete Container eine feste Höhe hat.
Die Google Embed API-Dokumentation erklärt die Modi und den Aufbau. Die Nutzung ist kostenlos und ohne tägliche Limitierung möglich.
Nutzen Sie die einfache Einbettung, wenn Schnelligkeit zählt. Upgraden Sie nur, wenn spezifische Funktionen notwendig sind.
Einrichtung des API-Keys und der Google Cloud-Abrechnung
Die API-Route ist für Gastgeber geeignet, die eine kontrollierte URL oder konsistente Einstellungen auf mehreren Seiten benötigen. Wichtig: Ein API-Key ist ein Zugangsdatenzertifikat. Ein ungesicherter Browser-Key kann missbraucht werden.
Lesen Sie die Richtlinien zur Nutzung und Abrechnung der Maps Embed API, bevor Sie starten.
Projekt erstellen und API aktivieren
In der Google Cloud:
- Projekt erstellen: Wählen Sie einen Namen, den Sie später wiedererkennen.
- Abrechnung einrichten: Hinterlegen Sie die erforderliche Zahlungsmethode.
- Maps Embed API aktivieren: Suchen Sie in der API-Bibliothek nach der Embed API und aktivieren Sie diese.
- Anmeldedaten erstellen: Generieren Sie einen API-Key im Bereich „Anmeldedaten“.
- Key sicher speichern: Hinterlegen Sie ihn nur dort, wo er wirklich benötigt wird.
Key vor der Veröffentlichung einschränken
Setzen Sie eine HTTP-Referrer-Einschränkung für jede Domain, die die Karte laden darf. Fügen Sie eine API-Einschränkung hinzu, sodass der Key nur die Maps Embed API aufrufen darf.
Sicherheitsregel: Lassen Sie einen API-Key für die Produktion niemals unbeschränkt.
Testen Sie den eingeschränkten Key auf der Live-Domain (inkl. www und nicht-www). Ein Key, der lokal funktioniert, aber den veröffentlichten Hostnamen ausschließt, führt zu einer defekten Karte.
Den richtigen Einbettungsmodus wählen
Der richtige Modus hängt davon ab, was der Gast tun soll. Nutzen Sie Place zur Standortbestätigung, Directions für die Routenplanung und View oder Street View für die Umgebung.
| Modus | Beste Verwendung | Einschränkung |
|---|---|---|
| Place | Standort für Unterkunft, Hotel oder Attraktion | Fokus liegt auf einem einzelnen Ort |
| View | Allgemeine Karte oder Satellitenansicht | Keine klare Standortkarte |
| Directions | Routenplanung zum Ziel | Kann für einfache Orientierung zu komplex sein |
| Street View | Ansicht des Eingangs oder der Einfahrt | Bilder könnten veraltet sein |
| Search | Ergebnisse für Suche in der Nähe | Konkurrenz könnte erscheinen |
Modus passend zur Seite wählen
Place-Modus ist meist die beste Wahl. Nutzen Sie eine präzise Place ID. Directions-Modus eignet sich für eine „Anreise“-Seite. Search-Modus ist gut für lokale Empfehlungen (z.B. Cafés), aber kennzeichnen Sie diese Ergebnisse als solche, da Sie keinen Einfluss auf die Resultate haben.
Responsive und barrierefreie Einbettung
Eine Karte, die auf dem Desktop gut aussieht, kann mobil das Layout sprengen. Nutzen Sie einen Container, um die Form zu steuern:
<div class="map-container">
<iframe
src="IHRE_GOOGLE_MAPS_URL"
title="Karte mit dem Standort der Ferienunterkunft"
aria-label="Interaktive Karte der Unterkunft"
loading="lazy"
allowfullscreen>
</iframe>
</div>
.map-container {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.map-container iframe {
width: 100%;
height: 100%;
border: 0;
}
Das Iframe als Teil der Informationen behandeln
Eine eingebettete Karte ersetzt keine schriftliche Wegbeschreibung. Nutzen Sie aussagekräftige title-Attribute und aria-label-Beschriftungen. Der WCAG-Leitfaden bietet hier wertvolle Tipps für die Barrierefreiheit.
Datenschutz und Einwilligung
Eine Live-Karte ist ein externer Dienst. Da der Browser Daten mit Google austauscht, sobald der Iframe lädt, sollten Sie prüfen, ob dies eine vorherige Einwilligung erfordert (DSGVO). Ein „Click-to-Load“-Verfahren ist hier die sauberste Lösung.
Click-to-Load-Verfahren nutzen
- Platzhalter: Zeigen Sie ein statisches Bild oder eine Info-Karte.
- Erklärung: Informieren Sie, dass die Karte Daten von Google lädt.
- Zustimmung: Button „Interaktive Karte laden“ hinzufügen.
- Alternativen: Link zu Google Maps anbieten.
Plattform-Tipps und häufige Fehler
Für WordPress nutzen Sie einen „Custom HTML“-Block. Vermeiden Sie den Standard-Editor, da dieser Iframes oft entfernt. Bei HubSpot bietet sich das Rich-Text-Modul an. ScanStay-Nutzer finden im digitalen Gästehandbuch bereits fertige Bereiche für Karten, sodass dort kein manueller HTML-Code eingefügt werden muss.
Fehler anhand der Symptome diagnostizieren
| Symptom | Ursache | Lösung |
|---|---|---|
| Karte bleibt weiß | Referrer-Einschränkung | Domain in Google Cloud zulassen |
| Warnung über der Karte | Abrechnung/Projekt inaktiv | Google Cloud Status prüfen |
| Karte zu breit/schmal | Fehlende Wrapper-Styles | Wrapper mit Seitenverhältnis nutzen |
Mit ScanStay können Sie lokale Empfehlungen, Anreiseinformationen und wichtige Hinweise in einem mobilen digitalen Gästehandbuch bündeln. Falls Sie verstreute Nachrichten durch einen zentralen, QR-basierten Guide ersetzen möchten, besuchen Sie ScanStay.