Google Maps – Cambiare coordinate in modo automatico con un click sulla mappa o trascinando il marker

Ecco come apparirà la nostra mappa non appena sarà caricata la pagina

Qualche mese fa vi ho presentato lo script base per integrare e personalizzare una mappa nel vostro sito, attraverso le API v3 che Google Maps ci mette a disposizione.

Adesso facciamo un passo avanti e vediamo uno script più complesso, ma che farà un’ottima impressione davanti agli utenti nel caso in cui abbiano la possibilità (o la necessità) di inserire il proprio indirizzo civico.
Nel complesso, ci sarà utile nel caso in cui l’utente debba scegliere una posizione leggermente più discostata rispetto a quella che gli propone Google Maps. In questo caso, gli basterà cliccare sul punto voluto della mappa oppure trascinare il marker (il segnaposto della mappa) nella posizione voluta: le coordinate di latitudine e di longitudine cambieranno automaticamente e appariranno all’interno di due campi input. La mappa sarà centrata sulla nuova posizione.
Questi due campi input potranno, naturalmente, essere poi salvati nel database come attraverso un normale form.

A livello tecnico, il codice funziona lato client: questo significa che potremmo farlo partire dal nostro computer senza bisogno di un server esterno (come invece succede, per esempio, con pagine gestite tramite php).
Inoltre, oltre all’index.html, l’unico file javascript che dovremmo includere nella nostra cartella sarà quello di JQuery: il codice infatti sarà un mix tra html, javascript e jquery.

Nello script che potete liberamente scaricare qui sotto troverete tutti i file già pronti e a disposizione, completamente funzionanti, compreso il jquery.js necessario per farci lavorare con JQuery. Se avete qualche esperienza, potrete personalizzarlo senza troppi problemi.
Di seguito analizzeremo le sue parti. Se avete scaricato lo script, vi sarà facile seguire la spiegazione.

Nel prossimo articolo faremo un ulteriore passo avanti e aggiungeremo una funzionalità al nostro codice: la possibilità, da parte dell’utente, di scrivere un indirizzo fisico. Alla pressione di un tasto, lo script trasformerà l’indirizzo in coordinate (latitudine e longitudine) e aggiornerà automaticamente la mappa.

Download script

Pagina diretta alla scheda e al download del codice

Le basi e il form

Il bella della versione 3 di Google Maps è il fatto di non richiedere una key per la gran parte dei funzionamenti (nella versione 2 era sempre obbligatoria). Questo significa che chiunque, anche chi non ha un account su Google, può programmare le mappe.

Innanzitutto, dovremmo richiamare le API di google maps e includere il file per JQuery: quest’ultimo è necessario per aggiornare gli input di latitudine e longitudine una volta cliccato sulla mappa o trascinato il marker:

1
2

<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
<script type='text/javascript' src='jquery.js'></script>

Subito dopo creeremo la funzione javascript initialize()

1

window.onload=initialize;

Infine, diamo un’occhiata al form, inserito nel corpo della pagina:

1
2
3
4
5

<form action="" method="post" id="form" name="formMaps">
	<div id="map" style="float:left; width:100%; height:350px; margin-bottom:30px;"></div>
	Latitudine <input type="text" name="lat" value="45.43872" id="coord_lat">
	<span style="margin-left:10px;">Longitudine <input type="text" name="lng" value="10.9917" id="coord_lng"></span>
</form>

I due input conterranno la latitudine e la longitudine. E’ importante che siano specificati i loro id (coord_lat e coord_lng), perché è su questi che agiremo una volta spostato il marker della mappa.
Il div con id map visualizzerà la Google Maps. Dovrete quindi inserirlo nel punto della pagina in cui volete visualizzarla e formattare lo style di conseguenza.

La funzione che aggiorna le coordinate

Passiamo ad analizzare la funzione initialize(), che è il cuore per il funzionamento del codice. Vedremo soltanto le parti più interessanti, utili per un’eventuale personalizzazione.

Impostiamo prima di tutto le coordinate (latitudine, longitudine) per caricare la mappa all’apertura della pagina. Nel nostro caso corrisponde all’indirizzo di “Verona”. Per conoscere le coordinate di altri indirizzi, potete recarvi direttamente al sito di google maps: una volta cercato l’indirizzo, vi basterà cliccare con il tasto destro del mouse sul marker e scegliere “Rilascia indicatore LatLng”.

1

latlng=new google.maps.LatLng(45.43872, 10.9917);

In seguito inizializziamo l’oggetto map associandogli le nostre opzioni. In questo caso è stato impostato uno zoom di livello 14 e una visuale di tipo “strada” (la classica mappa strada):

1
2
3
4
5
6
7

var myOptions={
  zoom: 14,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById('map'), myOptions);

Le opzioni successive definiscono l’oggetto marker:

1
2
3
4
5
6

marker=new google.maps.Marker({
	map:map,
	draggable:true,
	animation: google.maps.Animation.DROP,
	position: latlng
});

Quand’è che stabiliamo se considerare il click sulla mappa o il trascinamento del marker per cambiare le coordinate? Lo facciamo lanciando un evento attraverso queste due righe:

1
2

listener=google.maps.event.addListener(map, 'click', funPos);
listener2=google.maps.event.addListener(marker, 'mouseup', funPos);

Nel primo caso, stabiliamo che al click sull’oggetto map (che abbiamo definito sopra), sarà lanciata la funzione funPos(). Nel secondo caso, la stessa funzione sarà lanciata quando il marker sarà preso e rilasciato con il mouse.

A questo punto non ci resta che guardare funPos(): è qui che tireremo in campo l’uso del JQuery:

1
2
3
4
5
6
7

var funPos=function(e) {
	latlng=e.latLng;
	marker.setPosition(e.latLng);
	map.setCenter(latlng);
	$('#coord_lat').attr('value', e.latLng.lat());
	$('#coord_lng').attr('value', e.latLng.lng());
}

La funzione, in pratica, con la seconda riga stabilisce la posizione del marker, che sarà “spostato” alle nuove coordinate. La terza riga si preoccupa invece di centrare la mappa secondo le nuove coordinate (quindi il marker, anche dopo lo spostamento, si troverà sempre al centro della mappa).
Infine, le ultime due righe prendono le nuove latitudine e longitudine, e copiano il valore negli input che hanno id coord_lat e coord_lng.

Documentazione ufficiale di Google Maps