Einfache Google Maps Integration

Ein kleines Tutorial zum erstellen folgender Integration:

  • Integration der Map
  • Zentrieren der Map auf einen Punkt in einem gewissen Zoomlevel
  • Einen einfachen Marker mit ein wenig HTML Code anzeigen

Die fertige Integration sollte so aussehen:

API einbinden

Als erstes muss im head-Bereich der HTML Seite das Javascript integriert werden:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[API-KEY]" type="text/javascript"></script>

Dafür Google Maps richtig funktioniert, muess bei Google einen kostelosen API-Key generiert werden. Dies kann hier gemacht werden.

Map einbinden

Danach kann im Body Teil das Javascript für die Map eingebunden werden. Dies kann nach belieben verändert werden bis die Map dem entspricht was man will.

<script type="text/javascript">
  // <![CDATA[
  function load() {
    function createMarker(point,html) {
      var marker = new GMarker(point);
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
      });
 
      return marker;
    }
 
    if (GBrowserIsCompatible()) {
      var point = new GLatLng(46.758012,7.630876); // Koordinaten des Punktes
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(point, 17); // Punkt mit Zoomlevel
      map.enableContinuousZoom();
      map.setUIToDefault();
      var marker = new createMarker(point, '<img src="img/maps.jpg" mce_src="img/maps.jpg" alt="der coiff&ouml;r" id="entree" \ />der coiff&ouml;r<\/p>freienhofgasse 2<br\ />3600 thun<br\ />033 2211 778<\/p>');
      map.addOverlay(marker);
    }
  }
  // ]]>
</script>

Damit dies Funktion auch aufgerufen wird sind folgende Attribute im body-Tag notwendig:

<body onload="load();" onunload="GUnload();">

CSS einbinden

Und zum Schluss noch das CSS, damit dies auch wirklich wie gewünscht aussieht:

div#map {
  width: 600px;
  height: 400px;
}
 
div#map img#entree {
  float: left;
  margin-right: 10px;
}
 
div#map p.title {
  font-weight: bold;
}
 
div#map p.desc {
  font-size: 10px;
}
js/einfache_google_maps_integration.txt · Zuletzt geändert: 27.12.2013 19:46 (Externe Bearbeitung)
Nach oben
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0