Betten Sie eine Karte auf Ihrer Website ein
Schnell und ohne tiefere Programmierkenntnisse eine Karte in Ihre Website einbinden: Mit unserem Google Maps Generator können Sie das in wenigen Minuten. Das Besondere daran ist, dass Sie aus drei unterschiedlichen Kartenstilen wählen können.
Dieser Service ist kostenlos für die Nutzung auf privaten und gewerblichen Websites, sofern sie kostenlos und öffentlich zugänglich sind.
Wichtig: Seit Sommer 2016 ist es erforderlich, einen Google Maps API-Key anzufordern und anzugeben. Dieser ist kostenlos. Den entsprechenden Link finden Sie in unserem Google Maps Generator unter dem Feld, in das der Key eingegeben wird.
Es gelten die Nutzungsbedingungen für Google Maps von Google Inc.
Ubilabs Maps Generator
Kopieren Sie das Code Snippet und fügen Sie es auf Ihrer Webseite ein
In 4 Schritten zum kostenlosen API Key
Wer Google Maps auf seiner Website verwenden will, braucht einen Google Maps API Key. Der API Key ist kostenlos – und in nur 4 Schritten angelegt.
Projekt erstellen
Anwendung für Google Maps JavaScript API in der Google API Console registrieren: Den Punkt “Projekt erstellen” anwählen und auf "Weiter" klicken.
Browser-API-Schlüssel erstellen
“Browserschlüssel 1” erscheint als Voreinstellung im Feld “Name” – dies kann so übernommen oder geändert werden. Danach auf "Erstellen" klicken.
Der API-Schlüssel erscheint
API-Key kopieren und ins Eingabefeld eintragen.
Anleitung: So erstellen Sie eine Google-Karte für Ihre Website
1. Informationen einfügen:
-
In das Adressfeld tragen Sie die Straße und ggf. die Postleitzahl ein. Google Autocomplete hilft Ihnen, die richtige Adresse auszuwählen. Der Marker erscheint an der genannten Adresse.
- In das Feld “Titel” tragen Sie den Unternehmensnamen ein. Dieser erscheint dann im Info-Feld auf der Karte.
- Im Feld “Beschreibung” können Sie weitere Informationen einfügen, die unter dem Titel erscheinen.
2. Design der Karte anpassen:
-
Wählen Sie einen der drei angezeigten Kartenstile aus, indem Sie den gewünschten anklicken.
- Den Kartenausschnitt können Sie mit Klicken und Ziehen verändern.
- Höhe und Breite der Karte können Sie mithilfe des Reglers oder über die Eingabe einer Pixelanzahl entsprechend der Anforderungen Ihrer Website festlegen.
3. Google-Konformität sicherstellen:
- Da seit Sommer 2016 die Eingabe eines Google Maps API Keys erforderlich ist, haben wir eine Anleitung integriert, wie Sie einen API Key anfordern. Klicken Sie dazu auf den Link "Wo finde ich den API Key?" und folgen Sie den Anweisungen. Der API Key ist kostenlos und in nur vier Schritten erstellt.
- Den Google Maps API Key fügen Sie in das dafür vorgesehene Feld ein.
4. Code abrufen:
- Zum Schluss klicken Sie auf “Snippet anzeigen” – und schon erhalten Sie Ihren Code.
- Kopieren Sie diesen Code in die Zwischenablage.
- Fügen Sie den Code in Ihrer Website an der gewünschten Position ein.
Schritt für Schritt: So binden Sie die Karte richtig in unterschiedliche CMS ein
Das Einfügen des Codes ist in der Regel recht einfach. Wichtig ist, dass Sie im Editor die Quellcode-Ansicht auswählen. Das sieht für die unterschiedlichen CMS folgendermaßen aus:
Contao
- In der Editor-Toolbar das “Icon HTML” wählen
Drupal
- In der Editor-Toolbar das Icon “Quellcode” wählen
Joomla
- In der Editor-Toolbar das Icon ‘<>’ neben der Absatzformat-Auswahlbox wählen
Jimdo
- Klicken Sie im Editor auf “Inhalte hinzufügen”
- Wählen Sie “Widget / HTML” aus und fügen Sie den Google Maps-Code ein
Typo 3
- In der Editor-Toolbar das Icon “<>” wählen
Nun fügen Sie an der gewünschten Stelle das Code Snippet ein – fertig!

Rechtliche Rahmenbedingungen für die Nutzung von Google Maps
Der professionelle Einsatz von Google Maps erfordert in der Regel eine Lizenz. Erfahren Sie in unserem Infoportal zur Nutzung und Lizenzen von Google Maps, wie sich die Kosten nach dem Premium Plan berechnen lassen.