Google Maps: Karten einbinden in Webseiten und E-Mails

Startseite
Download
Anleitungen

WIE NUTZE ICH KARTENDIENSTE UND NAVIGATIONEN AUF MEINEM...

06. Juni 2021 um 11:30 Uhr

MarkusKasanmascheff

Karten von Google Maps lassen sich leicht auf einer Webseite oder in Mails einbinden. Netzwelt stellt euch die verschiedenen Möglichkeiten vor.

Google Maps: Karten einbinden in Webseiten und E-Mails - So geht´s (1)

Google Maps ist nicht ohne Grund der beliebteste Kartendienst. Funktionen wie Street View und Navigation erleichtern den Alltag und die Karten von Google Maps lassen sich zudem leicht anpassen und komfortabel teilen.

Falls ihr einen eigenen Blog oder eine Homepage habt, könnt ihr die Karten von Google Maps dort als iFrame-Element in den HTML-Code direkt einbinden und über Anfahrtswege und Standorte informieren. Auch in E-Mails lässt sich eine Karte von Google Maps leicht einbinden.

Beim Einbetten von Google Maps müsst ihr euch nicht auf Standard-Ansichten beschränken. Auch Navigations-Routen und mit "My Maps" selbst gestaltete Karten könnt ihr über ein iFrame-Element direkt auf eure Webseite setzen.

Wie ihr dabei vorgeht, zeigen die folgenden Abschnitte.

Karte von Google Maps per HTML-Code auf Webseite einbinden

1
Öffnet über die Suche den gewünschten Standort und klickt links auf "Teilen".
2
Unter "Karten einbetten" klickt ihr auf "HTML-Kopieren".
3
In der HTML-Ansicht eures Webseiten-Editors fügt ihr den zuvor kopierten "iframe"-Code an der gewünschten Stelle ein und speichert die Datei ab. Durch Anpassen der Werte bei "width" und "height" könnt ihr in Pixeln die Größe des Kartenausschnitts dabei frei anpassen.
4
Auf eurer Webseite habt ihr damit eine interaktive Google Maps-Karte eingebettet.

Zum Einbetten einer Google Maps-Karte in einer E-Mail könnt ihr folgende Methode verwenden. Ihr könnt dafür das Snipping Tool von Windows 10 oder die Screenshot-Funktion von Microsoft Edge oder Mozilla Firefox nutzen.

Karte von Google Maps als Bild in eine E-Mail einbinden

1
Öffnet den gewünschten Kartenausschnitt auf Google Maps und kopiert mit dem Tool eurer Wahl davon einen Screenshot in die Zwischenablage.
2
Mit der Tastenkombination "STRG + V" könnt ihr diesen direkt in der E-Mail einfügen.
See Also
Get Started | Maps URLs | Google for Developers Anleitung: Google Maps richtig auf der Webseite einbinden Google Maps: Eigene Karten erstellen und teilen
3
Unter Google Maps ruft ihr über die Teilen-Funktion den Link zur entsprechenden Google Maps-Karte ab.
4
Mit der Link-Funktion in eurem E-Mail-Editor könnt ihr diesen in einem Hinweis unter dem Bild einbinden.
5
Empfänger der E-Mail bekommen damit eine direkt eingebundene Karte und können diese bei Bedarf per Mausklick auf den Link darunter direkt in Google Maps öffnen.

Die beiden oben vorgestellten Methoden könnt ihr wie folgt auch mit von euch mit "My Maps" erstellten Google-Karten nutzen.

Selbst gestaltete Google-Karte von "My Maps" einbinden

1
Um einen Link für eure bei Google-"My Maps" erstellte Karte abzurufen, nutzt ihr ihre die "Teilen"-Funktion auf der linken Seite. Über den Link und einen Screenshot könnt ihr eure Karte wie zuvor gezeigt in einer E-Mail einbinden.
2
Habt ihr die Link-Freigabe für eure Karte aktiviert, könnt ihr euch einen Code zum Einbetten auf eurer Webseite erstellen. Dazu klickt ihr zunächst auf die drei Punkte neben dem Kartennamen.
3
Über "In meine Website einbetten" könnt ihr den benötigten iframe-Code aufrufen und eure Karte damit anschließend wie oben gezeigt auf eurer Webseite einbinden.

Wusstet ihr, dass ihr mit Google Maps Street View History mit historischen Aufnahmen auch in die Vergangenheit reisen könnt? Wie ihr das Zeitreisen-Feature aktivieren könnt, zeigen wir euch in der verlinkten Anleitung.