Mehrere Google Maps Karten auf einer Seite via Orts ID und API Key einbinden – Script und Anleitung

Mehrere Google Maps auf einer Webseite einbinden – iFrame vs. API (meine Erfahrung)

Vor einiger Zeit stand ich bei einem Kundenprojekt vor genau dieser Herausforderung:
Das Unternehmen hatte mehrere Filialen und wollte alle Standorte übersichtlich auf einer Seite mit Google Maps anzeigen. Meine erste Idee: schnell über iFrames einbinden. Das funktioniert grundsätzlich, ist aber keine saubere Lösung für professionelle Business-Webseiten. Warum? Weil Google die iFrame-Einbindung eher für private, kleine Projekte vorgesehen hat.

Für stabile und zukunftssichere Lösungen empfiehlt sich die Einbindung über die Google Maps API – mit eigenem API-Key. Hier zeige ich dir beide Wege.

Die schnelle Lösung mit iFrame

Für kleine Projekte oder Tests kann man jede Google Maps Karte als <iframe> einbinden. Das geht so:

1. Standort in Google Maps suchen.
2. Auf „Teilen“ klicken → Tab „Karte einbetten“.
3. Den generierten Code kopieren und in die Seite einfügen.

<iframe src="https://www.google.com/maps/embed?...berlin..." 
        width="600" height="450" style="border:0;" 
        allowfullscreen="" loading="lazy"></iframe>
  

Für mehrere Standorte kannst du mehrere iFrames untereinander setzen – technisch funktioniert das problemlos.

Warum iFrame für Business-Projekte nicht ideal ist

• Keine zentrale Verwaltung: Jeder Standort braucht einen eigenen Code.
• Performance: Viele iFrames auf einer Seite können die Ladezeit verlangsamen.
• Lizenz & Nutzung: Google empfiehlt iFrames eher für den Privatgebrauch. Für Unternehmen mit vielen Aufrufen ist die Maps API die saubere Lösung.
• Funktionalität: Mit iFrames kann man kaum interaktive Features nutzen (z. B. mehrere Marker in einer Karte, individuelle Styles, Clustering).

Die professionelle Lösung mit Google Maps API

Für Unternehmens-Websites lohnt es sich, die Google Maps JavaScript API zu nutzen. Damit kannst du mehrere Standorte in einer einzigen Karte darstellen – mit individuellen Markern, Info-Fenstern und besserer Performance.

Schritt-für-Schritt: API Key erstellen & Karte einbinden

1. Gehe zur Google Cloud Console.
2. Ein Projekt anlegen oder ein bestehendes wählen.
3. API aktivieren: „Maps JavaScript API“ auswählen und aktivieren.
4. Unter „Anmeldedaten“ einen API Key generieren.
5. Den Key auf deine Domain beschränken (Sicherheit!).
6. Diesen Code in deine Seite einfügen:

<div id="map" style="height:400px; width:100%;"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=DEIN_API_KEY&callback=initMap" 
        async defer></script>

<script>
function initMap() {
  var berlin = { lat: 52.5200, lng: 13.4050 };
  var hamburg = { lat: 53.5511, lng: 9.9937 };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: berlin
  });

  new google.maps.Marker({ position: berlin, map: map, title: "Filiale Berlin" });
  new google.maps.Marker({ position: hamburg, map: map, title: "Filiale Hamburg" });
}
</script>
  

So werden mehrere Standorte in einer einzigen Karte angezeigt – übersichtlicher, performanter und professioneller.

Wenn es schnell gehen soll, reicht die iFrame-Einbettung. Aber aus eigener Erfahrung bei Kundenprojekten: Für Business-Websites mit mehreren Filialen oder viel Traffic ist die Google Maps API die bessere Wahl.Sie bietet mehr Möglichkeiten, eine bessere Performance und ist die Lösung, die Google offiziell vorsieht. Wer also langfristig plant, sollte direkt den API-Weg gehen – auch wenn die Einrichtung ein paar Minuten mehr dauert.