Da ich nun schon des Öfteren gefragt wurde wie eine Google Maps Karte in die eigen Website integriert werden kann, hier eine kurze Anleitung:
- 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.
- 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.
123456789101112131415161718192021222324252627<!--<style type="text/css">v\:* {behavior:url(#default#VML);}</style><script src="http://maps.google.com/maps?file=api&v=2&key=HIER-DEINEN-GOOGLE-MAPS-API-KEY-EINGEBEN" type="text/javascript"></script><script type="text/javascript">//<![CDATA[function load() {if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl());map.setCenter(new GLatLng(46.346453623947134, 11.23853087425232), 13);var infoTabs = [new GInfoWindowTab("Adresse", '<p>NAME<br />ADRESSE<br />PLZ ORT</p>')];var marker = new GMarker(map.getCenter());GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml(infoTabs); });map.addOverlay(marker);marker.openInfoWindowTabsHtml(infoTabs);}}//]]></script>-->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.
- Nun kopierst du diesen Code in den body-Bereich deiner Website, also zwischen <body> und </body>.
Google Maps Code für body – Bereich
123<div id="map" style="width: 520px; height: 350px; background-color:#d0d0d0;cursor:pointer">Die interaktive Karte wird geladen... <br /><br />Sollte die Karte nach wenigen Sekunden nicht geladen werden, dann haben Sie in Ihrem Browser Javascript deaktiviert. Bitte Javascript aktivieren und die Seite neu laden.<br /><br />Danke.</div>Selbstverständlich kannst du die Breitenangabe width: 520px und die Höhenangabe height: 350px deinen Wünschen entsprechend anpassen.
- Jetzt erweiterst du den body-Tag, sodass er insgesamt wie folgt aussieht:
Google Maps Code für body – Tag
|
1 |
<body onload='if (document.getElementById("map")) load();' onunload='if (document.getElementById("map")) GUnload();'> |
So, nun müsste die dynamische Google Maps Karte bereits funktionieren.
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
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.
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
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 ??
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