Google Maps Generator für Ihre Website

In wenigen Schritten zur kostenlosen Karte – mit 3 verschiedenen Kartenstilen 

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

Style
Wo finde ich den API Key?

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.

  1. 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.

  2. 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.

  3. 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.