Google Maps Lageplan in eigene Website integrieren

Da ich nun schon des Öfteren gefragt wurde wie eine Google Maps Karte in die eigen Website integriert werden kann, hier eine kurze Anleitung:

  1. Unter Sign Up for the Google Maps API registrierst du deine Internetadresse und erhältst dadurch einen Google Maps API Key in der Form eines ziemlich langen alphanumerischen Code. Voraussetzung: du musst ein Google Konto haben und dich damit anmelden. Wenn du das nicht hast, dann registriere dich einfach für ein Google Konto. Ist kostenlos.
  2. Nun kopierst du diesen Code (klicke auf Quick code) in den head-Bereich deiner Website also zwischen <head> und </head>.

    Google Maps Code für head – Bereich

    Die erste und letzte Zeile, also die Zeichen <!– und –> weglassen.

    Vergiss nicht den Text HIER-DEINEN-GOOGLE-MAPS-API-KEY-EINGEBEN mit deinem Google Maps Api Key und die Geo-Koordinaten 46.346453623947134, 11.23853087425232 mit deinen Geo-Koordinaten zu ersetzten! Außerdem kannst du die Texte NAME, ADRESSE, PLZ und ORT deinen Wünschen entsprechend austauschen.

  3. Nun kopierst du diesen Code in den body-Bereich deiner Website, also zwischen <body> und </body>.

    Google Maps Code für body – Bereich

    Selbstverständlich kannst du die Breitenangabe width: 520px und die Höhenangabe height: 350px deinen Wünschen entsprechend anpassen.

  4. Jetzt erweiterst du den body-Tag, sodass er insgesamt wie folgt aussieht:
  5. Google Maps Code für body – Tag

So, nun müsste die dynamische Google Maps Karte bereits funktionieren.

Hoteltipps für Ihren Wanderurlaub in Südtirol

5 thoughts on “Google Maps Lageplan in eigene Website integrieren”

  1. Tobi K. says:

    Danke für den Beitrag. Es funktioniert wunderbar. Aber ich hab da noch eine Frage:
    Ich würde in dem Fenster für Name, Adresse usw. gerne noch die Option „Route berechnen“ einbauen. Wie sähe das für den oben stehenden Code genau aus?
    Ich habe schon versucht mir das wo anders zusammen zu suchen, leider ohne Erfolg. 🙁

    Liebe Grüße

  2. Webmaster says:

    Sorry, ich muss dich leider auf die Google Maps Api verweisen: http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/examples/index.html > Services > directions Beispiele. Mehr Support kann und will ich dafür aus zeitlichen Gründen nicht geben.

  3. karl says:

    was ist eigentl. mit tools wie http://www.mapseinbinden.com/google-maps-in-homepage-einbinden.html …kann man die bedenkenlos verwenden ohne irgendwie sich „probleme“ auf die webseite zu holen,also ich mein jetzt durch den code..

    gruß
    karl

  4. Wolfgang says:

    Darf man eigendlich den Googel-Plan per Copy/Paste bzw. rechte Mausttaste (z.B. als JPG-Datei) in die Webseite einbauen, auch wenn der Quellenhinweis angegeben ist, oder muss der Einbau nur per HTML-Code erfolgen ??

  5. Webmaster says:

    Hallo Wolfgang,

    meines Wissens darf man die Google Karte trotz Quellnachweis nicht per Copy/Paste einfügen, mann muss sich an den Google Code halten. Für Copy/Paste ist es ratsam Openstreetmap zu verwenden, wobei da aber auch der Quellnachweis geführt werden muss.

    Grüße
    Dietmar

Schreibe einen Kommentar

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