sastgroup.com

Inserire mappa e segnalini di google nel proprio sito

Posted on 24. May, 2006 by Administrator in javascript, motori di ricerca, tutorials

Se vogliamo inserire una mappa dinamica di google nel nostro sito, dobbiamo come prima cosa disporre di un account google. Se lo abbiamo bene, altrimenti ci registriamo su http://www.google.com/apis/maps/signup.html . Fatto ciò inseriamo l'url del sito in cui dobbiamo mettere la mappa

Fatto cio' avremo il nostro bel codice che saraà qualcosa del tipo:

 ABQIBBBBwVU8SsGlrIn1WCJ_qdERRhQZHdYfT
fStJFFXpa9CO048zFWHwxRrBhlLLhalDG1bANXoBBARwnp07A

Creiamo la pagina che mostrerà la mappa.

1. Inseriamo il codice javascript necessario 

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

2. Inseriamo la parte di codice che mostrerà la mappa

    <div id="map" style="width: 400px; height: 450px"></div>

3. Messaggio se non supporta javascript

    <noscript>abilita javascript</noscript>

4. funzione che inserisce i marker

    <script type="text/javascript">
    //<![CDATA[
    if (GBrowserIsCompatible()) {
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

5. Crea la mappa centrandola in latitudine e longitudine 37.836636,15.271892 e zoomandola di 19

      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(37.836636,15.271892),19);

6. Inserisce i marker

      var point = new GLatLng(37.836636,15.271892);
      var marker = createMarker(point,'<div style="width:240px">Arthos si trova proprio qui!</div>')
      map.addOverlay(marker);

 7. Non supporta il codice

    }
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    //]]>
    </script>

 Esempio completo

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAwVU8SsGlrIn1WCJ_qdERRhQZHdYfTfStJFFXpa9CO048zFWHwxRrBhlLLhalDG1bANXoBBARwnp07A"
      type="text/javascript"></script>
    <div id="map" style="width: 400px; height: 450px"></div>
    <noscript>no</noscript>
    <script type="text/javascript">
    //<![CDATA[
    if (GBrowserIsCompatible()) {
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(37.836636,15.271892),19);
      var point = new GLatLng(37.836636,15.271892);
      var marker = createMarker(point,'<div style="width:240px">Arthos si trova proprio qui!</div>')
      map.addOverlay(marker);
    }
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    //]]>
    </script>

Condividi su facebook