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.

, , , ,

Dieser Beitrag wurde am September 22, 2008, 11:13 am unter HTML CSS, Internet verfasst. Sie können alle Antworten auf diesen Beitrag nachverfolgen mit RSS 2.0. Sie können eine Antwort, oder einen Trackback von Ihrer eigenen Seite hinterlassen.

  1. Bisher keine Kommentare.
(wird nicht veröffentlicht)