« Aussichtsberg über dem Lago Maggiore (Langensee): Cardada 1350 m / Cimetta 1670 m
Rosengarten: Wanderung um die Rotwand - Karersee (Carezza) - Dolomiten »

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


      <style type="text/css">
        v\:* {
          behavior:url(#default#VML);
        }
        </style>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;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.

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

    Google Maps Code für body - Bereich


    <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.

  4. Jetzt erweiterst du den body-Tag, sodass er insgesamt wie folgt aussieht:

    5. Google Maps Code für body - Tag


    <body onload='if (document.getElementById("map")) load();' onunload='if (document.getElementById("map")) GUnload();'>

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

Der Beitrag wurde am Montag, den 22. September 2008 um 11:13 Uhr veröffentlicht und wurde unter Internet abgelegt. Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Hinterlasse eine Antwort