Ein Kunde will zu dir. Er hat deine Website gefunden, ist überzeugt – und tippt auf «Kontakt». Was er sieht: eine Adresse in Textform. «Bahnhofstrasse 12, 9000 St. Gallen.» Kein Kartenausschnitt, kein Pin, kein «Route berechnen»-Button. Also kopiert er die Adresse, wechselt in eine andere App, tippt sie neu ein – und genau in diesem Moment verlierst du einen Teil deiner Besucher.

Eine eingebettete Google-Maps-Karte löst dieses Problem in Sekunden. Sie zeigt deinen Standort visuell, öffnet auf Tippen direkt die Navigation und signalisiert nebenbei: Dieses Unternehmen gibt es wirklich, an einem echten Ort. Gerade für lokale Betriebe in der Schweiz – Coiffeure, Garagen, Praxen, Restaurants – ist das kein nettes Extra, sondern ein Vertrauens- und Conversion-Faktor.

In diesem Beitrag zeige ich dir, wie du Google Maps sauber einbindest: die schnelle Variante ganz ohne Programmierung, die flexible Variante mit API-Key, was du beim Datenschutz nach dem revidierten Schweizer Datenschutzgesetz (revDSG) beachten musst – und welche Fehler dich Ladezeit und Nerven kosten.

Warum eine Karte mehr bringt als eine Adresse in Textform

Text ist abstrakt, eine Karte ist konkret. Wer deine Adresse als eingebettete Karte sieht, versteht auf einen Blick, wo du bist, wie weit es ist und ob es in der Nähe von etwas Bekanntem liegt. Das senkt die Hemmschwelle, vorbeizukommen – und das ist am Ende bares Geld.

Konkret bringt eine eingebettete Karte drei Dinge: Erstens Orientierung – der Besucher sieht sofort, ob du in seiner Region bist. Zweitens eine funktionierende Navigation – ein Tipp auf die Karte öffnet Google Maps mit fertiger Route, besonders wichtig auf dem Smartphone. Drittens Vertrauen – ein sichtbarer, echter Standort wirkt seriöser als eine anonyme Website ohne Ortsbezug. Für lokales SEO ist die Konsistenz von Name, Adresse und Standort ohnehin ein wichtiges Signal.

Variante 1: Google Maps ohne Code einbinden (der iframe-Weg)

Für die allermeisten Schweizer KMU ist das der richtige Weg. Er ist kostenlos, braucht kein Entwicklerkonto und funktioniert in jedem Website-Baukasten – ob WordPress, Webflow, Framer oder ein selbst gebautes HTML-Template. So geht's:

  1. Öffne google.com/maps und suche deinen Standort oder dein Google-Unternehmensprofil.
  2. Klicke auf «Teilen» und wechsle im Fenster auf den Reiter «Karte einbetten».
  3. Wähle eine Grösse und kopiere den angezeigten <iframe>-Code.
  4. Füge diesen Code an der gewünschten Stelle auf deiner Kontaktseite ein – fertig.

Damit die Karte auf dem Smartphone gut aussieht, solltest du sie responsiv machen: Setze im iframe width="100%" und gib dem umgebenden Container eine feste Höhe (etwa 350–450 Pixel). So passt sich die Karte jeder Bildschirmbreite an, ohne seitlich abgeschnitten zu werden.

«Für 90 % der lokalen Betriebe reicht der iframe-Weg vollkommen aus. Er ist gratis, in fünf Minuten erledigt und braucht keine Wartung.»

Variante 2: Die dynamische Karte mit API-Key

Die iframe-Variante zeigt eine Standardkarte. Sobald du mehr willst – eigene Marker im Markenlook, mehrere Standorte, angepasste Farben oder Interaktionen – brauchst du die Maps JavaScript API und damit einen API-Key aus der Google Cloud Console.

Der Ablauf: Du erstellst ein Google-Cloud-Projekt, aktivierst die Maps JavaScript API, hinterlegst eine Zahlungsmethode und generierst einen API-Key. Wichtig: Beschränke den Key auf deine Domain (HTTP-Referrer), sonst kann ihn jemand anderes auf seiner Seite verwenden – auf deine Kosten. Google gewährt monatlich ein Gratis-Guthaben, das für normale KMU-Websites praktisch immer ausreicht. Erst bei sehr hohem Traffic entstehen Kosten, und die lassen sich mit einem Ausgabenlimit deckeln.

Für den Grossteil der Websites, die ich in der Schweiz betreue, ist die API überdimensioniert. Sie lohnt sich für Ketten mit vielen Filialen, für Storefinder oder wenn die Karte gestalterisch exakt zur Marke passen soll. Für den Coiffeur um die Ecke ist der iframe die klügere Wahl.

Google Maps und Datenschutz: Was Schweizer Websites beachten müssen

Hier wird es wichtig – und viele übersehen es. Sobald eine Google-Maps-Karte lädt, baut der Browser deines Besuchers eine Verbindung zu Google-Servern auf und überträgt dabei unter anderem die IP-Adresse. Datenschutzrechtlich ist das eine Bekanntgabe von Personendaten, und seit Inkrafttreten des revidierten Datenschutzgesetzes (revDSG) im September 2023 solltest du damit sauber umgehen.

Zwei Dinge gehören dazu: Erstens muss deine Datenschutzerklärung die Einbindung von Google Maps und die damit verbundene Datenübertragung nennen. Zweitens – und das ist die technisch sauberste Lösung – lädst du die Karte erst nach einer aktiven Zustimmung. In der Praxis heisst das: Statt die Karte sofort zu laden, zeigst du zunächst eine Platzhalterfläche mit einem Klick-zum-Laden-Hinweis. Erst wenn der Besucher tippt, wird die echte Karte nachgeladen. Das schützt die Privatsphäre und beschleunigt nebenbei den ersten Seitenaufbau.

Kriteriumiframe-EinbettungMaps JavaScript API
KostenGratisGratis-Guthaben, danach kostenpflichtig
API-Key nötigNeinJa
Eigene Marker & StylingNeinJa
Aufwand5 MinutenEinrichtung & Wartung
Ideal fürEinzelstandort, KMUFilialen, Storefinder

Die häufigsten Fehler beim Einbinden von Google Maps

Aus zahlreichen Website-Analysen für Schweizer Unternehmen tauchen dieselben Stolperfallen immer wieder auf:

  • Die Karte lädt sofort und bremst die Seite. Google Maps zieht viele Skripte nach. Wer die Karte auf jeder Seite im Footer einbindet, verschlechtert die Ladezeit überall – nutze sie nur dort, wo sie hingehört: auf der Kontaktseite.
  • Kein «Route berechnen». Eine Karte ohne verlinkte Navigation ist eine halbe Lösung. Verlinke den Marker direkt mit deinem Google-Unternehmensprofil, damit der Besucher mit einem Tipp losfahren kann.
  • Feste Pixelbreite. Ein iframe mit width="600" ragt auf dem Smartphone über den Rand hinaus. Immer width="100%" verwenden.
  • API-Key ohne Domain-Beschränkung. Ein offener Key ist eine offene Rechnung. Immer auf die eigene Domain einschränken.
  • Datenschutz ignoriert. Karte ohne Hinweis in der Datenschutzerklärung und ohne Consent – ein vermeidbares Risiko.

Was das für dein Business bedeutet

Eine eingebettete Karte ist ein kleines Detail mit grosser Wirkung. Sie kostet dich fünf Minuten, macht deinen Standort greifbar und nimmt dem Besucher den letzten Reibungspunkt vor dem Kontakt. Für die meisten Betriebe ist der iframe-Weg die richtige Wahl – schnell, gratis, wartungsarm. Wer mehr will, greift zur API. Und in beiden Fällen gilt: Denk an den Datenschutz, dann bist du auf der sicheren Seite.

Wenn du sichergehen willst, dass deine Kontaktseite nicht nur eine Karte zeigt, sondern auch tatsächlich Anfragen bringt, lohnt sich ein ehrlicher Blick von aussen. Genau dabei helfe ich – siehe auch Google-Unternehmensprofil optimieren und die Local-SEO-Tipps für die Schweiz.


Häufige Fragen

Kostet das Einbinden von Google Maps etwas?

Die einfache iframe-Einbettung über «Karte einbetten» ist komplett kostenlos und braucht keinen API-Key. Kosten entstehen erst bei der Maps JavaScript API mit eigenem Key – und auch dort erst, wenn du das monatliche Gratis-Guthaben überschreitest. Für eine normale KMU-Website in der Schweiz bleibt das in der Praxis gratis, solange du ein Ausgabenlimit setzt.

Warum zeigt meine Karte «For development purposes only» an?

Diese graue Warnung erscheint bei der API-Variante, wenn kein gültiges Abrechnungskonto hinterlegt ist oder der API-Key falsch eingerichtet wurde. Prüfe in der Google Cloud Console, ob die Maps JavaScript API aktiviert ist, eine Zahlungsmethode hinterlegt wurde und der Key für deine Domain freigegeben ist. Wer diesen Aufwand umgehen will, nutzt die kostenlose iframe-Variante – dort tritt der Fehler gar nicht erst auf.

Verlangsamt Google Maps meine Website?

Ja, wenn die Karte beim Seitenaufbau sofort mitgeladen wird, denn sie zieht mehrere externe Skripte nach. Die Lösung: Binde die Karte nur auf der Kontaktseite ein und lade sie erst nach einem Klick (Consent- bzw. Lazy-Load-Prinzip). Das verbessert gleichzeitig den Datenschutz und die Ladezeit – zwei Fliegen mit einer Klappe.


Weiterführende Links


Bereit für eine Website, die wirklich funktioniert?

Ich analysiere dein Projekt kostenlos und zeige dir, was möglich ist.


👨‍💻

Über den Autor – Livio Bätschmann

Livio Bätschmann ist Webdesigner und SEO-Spezialist aus der Ostschweiz. Mit seiner Agentur specialpage unterstützt er Unternehmen in der Schweiz bei Webdesign, Suchmaschinenoptimierung (SEO), Local SEO und der Erstellung moderner Websites, die bei Google sichtbar werden und neue Kunden gewinnen. Seine Schwerpunkte liegen auf benutzerfreundlichem Webdesign, lokaler Suchmaschinenoptimierung und digitalen Strategien für Selbstständige, KMU und Startups. Weitere Tipps und Fachartikel rund um Websites, SEO und Online-Marketing findest du auf specialpage.ch.