Integrera Google Maps på enklaste sätt

Om du vill visa en karta på din webbsida och koppla adresser till kartan med nålar så kan det inte vara enklare än vad Google Maps har gjort det (gå in på maps.google.com/api för att få en egen utvecklarnyckel):

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=din-utvecklarnyckel" type="text/javascript"></script>
    <script type="text/javascript">
    var map = null;
    var geocoder = null;
    var lastAddress = null;
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(59.327405,18.073250), 13);
                             map.addControl(new GLargeMapControl);
        geocoder = new GClientGeocoder();
      }
    }
    function showAddress(address, info) {
      if ((address != lastAddress) && (geocoder)) {
                             lastAddress = address;
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 13);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(info);
            }
          }
        );
      }
    }
    </script>

Sedan kan du anropa koden ovan med hjälp av följande javascript-anrop:

showAddress(“Observatoriegatan 6, 113 29 STOCKHOLM”, “Iteam Solutions AB”);

Exempelimplementation:

<ul>
     <li onmouseover="showAddress(this.childNodes[2].innerHTML, this.innerHTML);">
     <h2>Bojens Färg</h2><p>Norrtullsgatan 61, 113 45 STOCKHOLM</p>
     </li>
     <li onmouseover="showAddress(this.childNodes[2].innerHTML, this.innerHTML);">
                                 <h2>Bygghuset Roslagstull</h2><p>Björnnäsvägen 23, 113 47 Stockholm</p>
     </li>
     <li onmouseover="showAddress(this.childNodes[2].innerHTML, this.innerHTML);">
                                 <h2>Järnhörnan</h2><p>Södermannagatan 46, 116 40 Stockholm</p>
     </li>
     <li onmouseover="showAddress(this.childNodes[2].innerHTML, this.innerHTML);">
                                 <h2>Bojens Färg</h2><p>Norrtullsgatan 61, 113 45 STOCKHOLM</p>
     </li>
</ul>

Resultatet blir såhär med lite stylesheets: