Google Maps auf deiner WordPress Seite einbinden und anpassen

Hier erfährst du wie du Google Maps auf der WordPress Seite einbauen und anpassen kannst. Z. B. wie du es schaffst, dass die Karte sich immer an die Spaltengröße anpasst.
wordpress-websites
Kerstin-Mueller-Podcast

Google Maps auf deiner WordPress Seite einbinden und anpassen

Hier erfährst du wie du Google Maps auf der WordPress Seite einbauen und anpassen kannst. Z. B. wie du es schaffst, dass die Karte sich immer an die Spaltengröße anpasst.
Zuletzt aktualisiert: 17. April 2024 @ 14:23 Uhr
***UPDATE***
Ich selbst nutze diese Funktion wegen der DSGVO nicht mehr, denn Google Maps trackt beim Aufruf deiner Webseite die IP Adresse deines Besuchers und das ist ohne Zustimmung nicht erlaubt. So habe ich mich im Juni 2018 entschlossen, nur noch einen einfachen Link zu Google Maps zu setzen und somit das Tracking zu umgehen.

1. Google Maps per Link einbauen

Ich erkläre dir hier Step by Step wie du Google Maps auf deiner Website einbauen und auch individuell anpassen kannst.
1. Du gehst zu Google Maps
2. Dort gibst deine Adresse ein.
3. Danach gehst du auf die drei kleinen Balken links oben…

…und drückst dort auf „Karte teilen oder einbetten“.
Menü Google Maps
4. Jetzt erscheint ein kleines Fenster und dort kannst du den angezeigten Link kopieren und auf deiner WordPress Seite an jeder beliebigen Stelle als Link einsetzen.

…oder du kannst ihn hier auch kürzen, um ihn z. B. auf Twitter zu teilen.

2. Google Maps auf deiner Website einbinden

1. Wiederhole Punkt 1-3.
4. Klicke auf „Karten einbetten“

Standardmaäßig ist hier eine mittlere Größe eingestellt. Wenn du auf „Mittel“ links oben in dem kleinen Fenster klickst, kannst du dort auch eine individuelle Größe einstellen. Danach kopierst du den Link und fügst ihn auf deiner WordPress Seite ein.
ACHTUNG
Dazu musst du den Texteditor benutzen und nicht den Visuellen Editor!


Möchtest du, dass sich die Google Maps Karte immer automatisch an deine Seitengröße anpasst? Dann kannst du im rot gekennzeichneten Bereich im unteren Bild, die Breite „width“ auf 100% einstellen und die Höhe „height“ auf deine gewünschte Größe einstellen.

Probier es aus. Viel Spaß dabei 🙂

12 Kommentare

  1. Ein sehr hilfreicher Artikel, gerade für Leute wie mich, die Routen auf ihrem Blog veröffentliche. Vielen Dank, dass du dein Wissen teilst,
    Heinz

    Antworten
  2. Deine Artikel sind großartig. Vielen Dank für den ganzen Input.
    Kann ich auch Google Mymaps einfach so einbinden?

    Antworten
    • Vielen Dank für dein Feedback. Ob es mit Google Mymaps funktioniert, kann ich dir leider nicht sagen. Bedenke aber, dass seit Mai 2018 die DSGVO in Kraft getreten ist und Google die IP Adresse einsammelt, wenn jemand deine Seite besucht. Ich selbst binde es nicht mehr ein und wenn, solltest du in der Lage sein, berechtigtes Interesse vorzuweisen. Das ist aber schon schwierig. Viel Erfolg.

      Antworten
  3. Ein sehr interessanter Artikel. Funktioniert an sich prima, wenn die Leute die Webseite über Laptop/PC aufrufen. Sobald sie die Webseite mit den Maps-Link über ein Mobilgerät aufrufen, auf dem Google Maps App installiert ist (was ja dummerweise viele haben), startet automatisch die Google Maps App und nicht die Browser-Version von Maps und in der App ist die Karte leider nicht sichtbar. Hast du vielleicht eine Idee, wie ich das verhindern kann?
    Herzlichen Dank, auch dass du solche hilfreichen Infos veröffentlichst. Ich hätte sicherlich sonst einfach „Einbetten“ verwendet…

    Antworten
    • Du könntest das mit CSS lösen und dem Container eine ID geben und mobil ausblenden und dann für mobil etwas eigenes bauen. Ich nutze die Einbettung wegen der DSGVO überhaupt nicht mehr, denn es werden Daten gesammelt deines Besuchers. Ich nutze nur noch einen einfachen Link direkt zu Google. Was du auch machen könntest wäre eine Karte als Bild einfügen und dann einfach verlinken.

      Antworten
      • Vielen Dank für die schnelle Antwort. Ich verstehe deinen Punkt sehr gut. Ich habe allerdings das Problem, dass ich ganze Karten verlinken möchte, weil wir unsere Reiseroute mit Orten etc. sichtbar machen wollen. Und die meisten Leute eben doch über das Mobilgerät auf unserer Webseite sind. Und dann immer die Maps-App öffnet und dort die verlinkte My-Maps-Karte nicht geöffnet wird…:(

        Antworten
        • Verstehe! Da müsste man dann mal tiefer reinschauen, ob man das lösen kann. Handys wollen natürlich ihre eigenen Apps verwenden und ob man das unterbinden kann, muss man recherchieren

          Antworten
          • Ja, scheint kompliziert. Trotzdem vielen Dank für die Gedanken dazu.

  4. Hallo Zusammen,
    wie kann ich nun neben der Map einen Ansprechpartner plazieren, ohne das es untereinander aufgelistet wird?
    vielen Dank vorab!

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert