Divi Tutorial: Google Maps ohne Kreditkarte einbinden

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:

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 🙂

Hi, ich bin Channi

Ich helfe kreativen Dienstleister durch Brand- und Webdesign zu mehr Selbstvertrauen, fairen Preisen und mehr Traumkunden. Mit meinem Template Shop untersütze ich dich schnell sichtbar zu werden.

hole dir meinen website builder

Offenlegung: Einige der Links in diesem Beitrag sind ‚Affiliate-Links‘ (mit * gekennzeichnet). Das bedeutet, wenn Sie auf den Link klicken und den Artikel kaufen, erhalte ich eine Affiliate-Provision.

Website & Technik

WordPress & Divi

Onlinemarketing

Branding & Grafikdesign

Workbook: magnetisches Webdesign

0 Kommentare

Einen Kommentar abschicken

Pin It on Pinterest

Share This