Google Maps in Webseite einbetten – so einfach geht’s

StartupKategorie
4 min lesen
Wolf-Dieter Fiege

Google Maps gehört aus gutem Grund zu den meistgenutzten Kartendiensten. Ob du dich mit der Navi-App ans Ziel führen lässt, via Street View die Welt erkundest oder die aktuelle Verkehrslage für den Nachhauseweg checkst – Google Maps bietet viele praktische Features, die den Alltag erleichtern. Noch mehr: Du hast die Möglichkeit, Karten und Routen in deine Webseite einzubinden. Das ist nicht nur kostenlos, sondern auch relativ einfach machbar. Probiere es mit der Anleitung doch direkt mal aus.

Wie kann ich Google Maps auf meiner Webseite nutzen?

Mit einer benutzerfreundlichen Webseite bringst du dein Business auf Erfolgskurs. Dazu gehören neben ansprechendem Content auch visuelle Elemente, die Besuchern einen echten Mehrwert bieten und die Usability erhöhen. Eine Karte aus Google Maps ist ideal, um deinen Standort oder einen anderen Ort darzustellen. Denn anhand der Kartenansicht können sich Nutzer besser orientieren, als wenn nur eine Adresse vermerkt ist. Google Maps bietet somit verschiedene Einsatzmöglichkeiten für Blogs, Webseiten und Online-Shops. Hier kommen gleich ein paar Beispiele:

  • Wenn Kunden per Click & Collect in deinem Online-Shop einkaufen, weist ihnen Google Maps den Weg zum Ladengeschäft.
  • Auf deinem Reise-Blog kannst du Besuchern genau zeigen, wo sich die besten Cafés, Sehenswürdigkeiten und Unterkünfte befinden.
  • Um den Anfahrtsweg vom Bahnhof, Flughafen etc. zu deinem Standort abzubilden, bettest du die Route auf deiner Webseite ein.

Karten und Routen auf Webseite einfügen

Google Maps lässt sich als iFrame in eine Webseite einbinden. Das iFrame-Element ermöglicht es dir, Inhalte aus anderen Quellen an beliebiger Stelle in eine Webpage einzubetten – wie eben eine Karte von Google Maps. Da du hierbei mit einem HTML-Code arbeitest, sind entsprechende Kenntnisse hilfreich. Wie das genau funktioniert, verrät dir die Anleitung:

  1. Öffne Google Maps wie gewohnt über deinen Browser. Dann suchst du nach dem gewünschten Standort, der Route oder dem Street View-Bild, das du auf deiner Webseite einbinden möchtest.
  2. Um den HTML-Code aufzurufen, klickst du oben links auf das Menü (drei Striche) und wählst „Karten teilen oder einbetten“ und anschließend „Karten einbetten“ aus. Alternativ siehst du in Google Maps unter der gesuchten Adresse den Button für „Teilen“ (drei verbundene Punkte).
  3. Links neben dem Textfeld für den HTML-Code lässt sich die Größe der Karte einstellen. Suche dir die passende Größe für deine Webseite aus oder lege selbst ein benutzerdefiniertes Format fest. Du kannst dir dafür eine Preview anzeigen lassen.
  4. Klicke auf „HTML kopieren“ und füge den Code in der HTML-Ansicht deines Webseiten-Editors dort ein, wo du den iFrame anzeigen möchtest. Hier hast du noch einmal die Möglichkeit, die Größe der Karten anzupassen. Dazu änderst du die Werte für „width“ und „height“. Denke daran, die Datei zu speichern.
  5. Et voilà – die eingebettete Karte erscheint auf deiner Webseite.

My Maps von Google in die Webseite einbinden

Mit My Maps von Google lassen sich benutzerdefinierte Karten erstellen. Auf deiner eigenen Karte kannst du beispielsweise mehrere Orte markieren, die interessant sind. Google Maps erlaubt dir außerdem, die Karten mit Symbolen, Fotos und Videos zu personalisieren. Wenn du deine Karte fertig bearbeitest und gespeichert hast, klicke auf der linken Seite auf „Teilen“ und „Linkfreigabe erlauben“, damit sie öffentlich im Web verfügbar ist. Im nächsten Schritt kopierst du den HTML-Code wieder über das Menü. Dort wählst du die Option „In meine Webseite einbetten“ aus. Folge danach den Anweisungen in der Anleitung oben.

Mit dem Homepage -Baukasten von GoDaddy kannst du deine Business und deine Webseite mit wenigen Klicks bei Google My Business anmelden um schnell und einfach gefunden zu werden.

Titelmotiv: Photo by Henry Perks on Unsplash