jQuery e Google Maps: trovare una località

  • jQuery
  • Gabriele Romanato

Trovare una località con le Google Maps è diventato molto più semplice da quando Google ha deciso di rilasciare la versione 3 delle sue API. Con questa nuova versione non è più necessario disporre di una chiave per sviluppatori, ma è sufficiente caricare le librerie delle API con un semplice elemento script. In questo esempio vedremo come inserire una mappa dell'Italia e consentire agli utenti di cercare una località tramite un apposito form di ricerca. jQuery ci verrà in aiuto per la gestione del form, ma gran parte del lavoro verrà svolto dalle API di Google Maps.

Per iniziare, ecco il nostro form:


<form id="locationForm" action="/" method="get">
    <div>
      <label for="location">Località:</label>
      <input type="text" name="location" id="location" />
      <input type="submit" id="addressButton" value="Trova" />					
    </div>
</form>

Quindi inseriamo un contenitore vuoto per la nostra mappa dell'Italia:


<div id="map"></div>

Le mappe di Google hanno bisogno che il loro contenitore abbia sempre delle dimensioni definite nel CSS:


#map {
    width: 500px;
    height: 400px;
    margin-top: 1em;
}

A questo punto inseriamo nella pagina i riferimenti a jQuery e alle API di Google Maps prima della chiusura del tag body:


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>

Subito dopo questi riferimenti possiamo inizializzare il nostro codice usando l'evento ready() di jQuery:


$(document).ready(function() {

  //...

});

Per far funzionare il nostro esempio, le API di Google Maps hanno bisogno dei seguenti riferimenti:

  • un riferimento all'elemento che contiene la mappa
  • un riferimento al geocoder, ossia all'oggetto che gestisce la geolocazione
  • un riferimento al marcatore della mappa (la classica iconcina posta sulla località)
  • un riferimento alla finestra di informazioni della mappa (la nuvoletta che appare sulla località)

Inizializziamo da subito questi riferimenti:


var map, geocoder, marker, infowindow;

Ora dobbiamo creare e visualizzare la mappa dell'Italia:


var options = {  
      zoom: 6,  
      center: new google.maps.LatLng(42.50, 12.50),  
      mapTypeId: google.maps.MapTypeId.ROADMAP  
};  

map = new google.maps.Map($('#map')[0], options);

L'oggetto Map accetta due parametri: il riferimento DOM al contenitore della mappa e un oggetto letterale contenente le varie opzioni. In questo caso le opzioni riguardano lo zoom della mappa, le coordinate per centrare la mappa (latitudine e longitudine) e il tipo di mappa (qui è stradale). Abbiamo usato $('#map')[0] poichè l'oggetto Map vuole un elemento DOM come parametro, non un oggetto jQuery (che non viene accettato).

A questo punto usiamo jQuery per gestire il form di ricerca:


$('#locationForm').submit(function(e) {
    
        var location = $('#location').val();
        
        getLocation(location);
        
        e.preventDefault();
    
    
});

La funzione getLocation() ha come parametro il valore del campo di testo del form che sarà usato per implementare la ricerca. Ecco come si presenta il codice di tale funzione:


function getLocation(location) {
    
       if(!geocoder) {
          geocoder = new google.maps.Geocoder();	
        }
        
        var geocoderRequest = {
          address: location
        }
        
        geocoder.geocode(geocoderRequest, function(results, status) {
        
        
            if (status == google.maps.GeocoderStatus.OK) {

            
                map.setCenter(results[0].geometry.location);

        
                if (!marker) {
         
                  marker = new google.maps.Marker({
                  map: map
                 });
               }
        
        
        marker.setPosition(results[0].geometry.location);

       
        if (!infowindow) {
       
          infowindow = new google.maps.InfoWindow();
        }

        
        var content = '<strong>' + results[0].formatted_address + '</strong><br />';
        

        
        infowindow.setContent(content);

       
        infowindow.open(map, marker);


        }
        
        
        });
    
}

Questa funzione prende il valore del campo di testo del form e lo passa all'oggetto Geocoder per la geolocalizzazione. Tale oggetto esegue una richiesta e restituisce un array contenente le informazioni sulla località cercata. Per esempio, la proprietà location ci dà le coordinate della località richiesta e noi usiamo tali coordinate per centrare la mappa dell'Italia (tramite il metodo setCenter()). Per poter effettuare tali operazioni è necessario tuttavia che l'oggetto GeocoderStatus non restituisca errori.

Quindi posizioniamo il marcatore sulla località cercata usando il metodo setPosition() dell'oggetto Marker. Tale oggetto viene creato passandogli come parametro un riferimento all'oggetto Map precedentemente creato. Infine, creiamo un oggetto InfoWindow e usiamo i suoi metodi setContent() (per impostarne il contenuto) e open() (per mostrarlo sulla mappa).

Noterete che prima di creare questi oggetti abbiamo verificato tramite un costrutto if se non fossero già stati creati in precedenza. Questo ci permette di evitare inutili problemi di sovrapposizione di elementi facendo in modo che solo due oggetti alla volta siano presenti sulla mappa.

Per maggiori informazioni sulle API di Google Maps e per avere più esempi e tutorial si rimanda alla documentazione ufficiale di Google.

Potete visionare l'esempio finale in questa pagina.

Torna su