Inserire una Google map e un campo di ricerca nel sito

Creare una mappa sfruttando le API di Google è davvero molto semplice, richiede pochissimo sforzo e nessuna conoscenza di javascript. Esistono tante guide in rete ma probabilmente la più chiara è quella ufficiale . Cercherò di riassumere i principali passaggi per ottenere questo risultato.

Procurarsi una API key

La prima cosa da fare è procurarsi una key. Per chiedere una API key è necessario inserire l'indirizzo del sito nel form in fondo a questa pagina.

Individuare le coordinate sulla mappa

Per poter centrare una mappa in un punto preciso, dobbiamo procurarci le coordinate. Andiamo su mapki e, aiutandoci eventualmente con lo zoom, clicchiamo nel punto desiderato. Latitudine e longitudine appariranno nella parte bassa della pagina.

Nell'esempio ho creato una mappa di Napoli. Mapki mi aveva fornito le coordinate

Latitude: 40.84913799774758
Longitude: 14.247894287109375

Non è necessario usare tutte le cifre dopo il punto. Di solito tre sono sufficienti.

Il javascript

Nell'head occorre inserire due script. Il primo si riferisce alla Google maps Api key che ci siamo procurati all'inizio.

Il secondo contiene le funzioni della mappa <script type="text/javascript">
    //<![CDATA[    var map = null;
    var geocoder = null;    function load() {
      if (GBrowserIsCompatible()) {
 map = new GMap2(document.getElementById("map"));
 
 /*mappa - satellite - ibrida */
 map.addControl(new GMapTypeControl());
 
 /*controller con barra vert*/
 map.addControl(new GLargeMapControl());
 
 /*zoom box, in basso a dx*/
 map.addControl(new GOverviewMapControl(),
 new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(9, 9))); /*COORDINATE DI PARTENZA DELLA MAPPA*/
 map.setCenter(new GLatLng(40.849, 14.247), 12); geocoder = new GClientGeocoder();      }
    }
 /*cerca un indirizzo*/
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " non trovato");
            } else {
   /*zoom*/
              map.setCenter(point, 14);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
            }
          }
        );
      }
    }    //]]>
    </script>

Ho inserito dei commenti nel javascript e credo che sia tutto molto chiaro. Vorrei solo evidenziare che è necessario personalizzare map.setCenter con le nostre coordinate. Inoltre, per ottenere risultati migliori, si può aggiustare lo zoom di GSize (riferito alla mappa rimpicciolita in basso a destra) e map.setCenter (riferito alle coordinate iniziali e, nella funzione showAddress, al risultato ricerca)

Il body

Modificare il tag body come segue:

Infine inseriamo nella pagina il box di ricerca degli indirizzi e la mappa:

Nel div si possono personalizzare la larghezza e l'altezza della mappa.

Riporto il link all' esempio e Download in formato .zip (non funziona senza la key API fornita da Google).

Discuti di questo articolo sul forum. (0 posts)