Website Kategorien

Go Live mit Channi: DIY-Website

The Revamp: Individuelle Website

Mentoring: Ready to S(c)ale

Divi Tutorial: Google Maps ohne Kreditkarte einbinden

Offenlegung: Einige der Links in diesem Beitrag sind ‚Affiliate-Links‘ (mit * gekennzeichnet). Das bedeutet, wenn du auf den Link klickst und den Artikel kaufst, erhalte ich eine Provision. Am Kaufpreis ändert sicht nichts für dich. 

i 3 Table Of Content

Die Google Maps API erfordert seit einiger Zeit das Hinterlegen einer Kreditkarte, aber es gibt noch eine weitere Möglichkeit ganz einfach Google Maps auf deiner Webseite einzubinden.

Für diejenigen unter euch, die eine ältere Webseite mit Divi haben, funktioniert die Karte eventuell schon länger nicht mehr. Grund dafür ist, dass Google seine Richtlinien geändert hat und das Hinterlegen einer Kreditkarte verlangt. Eventuell hattest du bisher auch noch keine Karte eingebunden und möchtest jetzt die Anfahrt für deine Kunden dadurch erleichtern.

Egal, was dein Beweggrund ist, hier eine einfache Anleitung, wie du Google Maps auf deiner Webseite -ohne Kreditkarteninformation- einbinden kannst.

So sieht das Ergebnis aus:

Google Maps

Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren

Karte laden

Schritt 1: Hole dir den Einbettungscode von Google Maps

Gehen Sie zu google.com/maps und suche nach deinem Standort. Das Menü erscheint auf der linken Seite wie im Bild unten. Klicke auf die Schaltfläche „Teilen“, um das Einbettungscode-Popup anzuzeigen.

Wenn du auf den Button zum Teilen klickst, wird ein Popup mit zwei Registerkarten angezeigt. Klicke auf den Reiter „Karten einbetten“.

Als nächstes siehst du eine Vorschau der Karte mit der Standardgröße. Keine Sorge, ich zeige dir später, wie du die Größe änderst! Vorerst kannst Sie den Code auswählen und kopieren oder einfach auf den Button „HTML KOPIEREN“ klicken.

Schritt 2: Den Einbettungscode zu Divi hinzufügen

  1. Füge deine gewünschte Sektion-, Zeilen- und Spaltenstruktur ein
  2. Gebe ein Code-Modul hinzu
  3. Füge den Einbettungscode in den Inhaltsbereich des Codemoduls ein

Schritt 3: Ändern der Kartengröße auf volle Breite

Die standardmäßige Einbettungscodierung von Google Maps ist 600 Pixel breit und 450 Pixel hoch. Die meisten Divi-Benutzer möchten, dass die Karte von Kante zu Kante in voller Breite ist (wie das Kartenmodul mit voller Breite in Divi). So geht das:

  1. Eine reguläre Sektion hinzufügen
  2. Füge eine Zeile mit einer Spalte hinzu
  3. Setzen Sie auf der Registerkarte Zeile -> Design die Größe auf Volle Breite (Maximale Breite und Breite auf 100%), Spaltenabstand auf 1 und den oberen und unteren Zwichenraum -> Innenabstand (Padding) auf 0.
  4. Hinzufügen eines Code-Moduls
  5. Füge den Code in den Inhaltsbereich (Text) des Codemoduls ein
  6. Ersetze die Breite „600px“ durch „100%“

Und „That’s it“! So einfach kannst du Google Maps auf deiner Webseite einbinden.
Du möchtest mehr solcher Anleitungen oder hast Anregungen oder Probleme? Dann schreibe es gerne in die Kommentare 🙂

Channi

Ich bin Mompreneurin, DIY-Website Cheeleaderin, Automatisierungs- und Skalierungsfan. Seit Anfang 2022 bestreite ich selber das Abenteuer Online Business und helfe dir mit meiner Erfahrung aus dem Bereich Webdesign und Prozessautomatisierung.

0€ Magnetic Website - in drei Tagen zum Websitebau­plan