Completamento automatico localita’ tramite Google maps API

Google mette a disposizione una API gratuita per l’autocompletamento in tempo reale della località inserita dall’utente

Prendiamo un form input HTML

<input id="input" type="text" style="width:500px;" />

Includiamo le Google Maps API nell’head della pagina html:

<script type="text/javascript" src='http://maps.google.it/maps/api/js?sensor=false&libraries=places'></script>

L’API da utilizzare è google.maps.places.Autocomplete() e richiede in ingresso il form html sul quale applicare l’autocompletamento:

<script>
function init()
{
   var input = document.getElementById('input');
   var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', init);
</script>

A questo punto digitando qualcosa nel form comparirà il popup con le possibili scelte. Da notare che il popup ha stessa larghezza del form al quale è agganciato.

Screen shot 2016-08-14 at 5.03.46 PM

Tagged .

22
Leave a Reply

avatar
10 Comment threads
12 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
11 Comment authors
emanueleserenellaAlessandrodiegoluca Recent comment authors
emanuele
emanuele

CIao Gianluca …
per caso sapresti dirmi come posso personalizzare i risultati che escono quando comincio a scrivere qualcosa nel campo di autocompletamento ?
adesso se scrivo qualcosa escono i nomi proposti da Google … perchè se si scrive ROMA escono :
-Roma RM, Italia
-Roma Italia

posso aggiungerci per esempio se uno scrive appunto ROMA escano :

Roma RM, Italia ( città )
Roma Italia (Regione)

Grazie

emanuele
emanuele

io però sto usando semplicemente AUTOCOMPLETE

preso da qui :
https://developers.google.com/maps/documentation/javascript/places-autocomplete

esempio : https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

ma il mio intento è quello di personalizzare i valori che escono dall’autocomplete e non di filtrarli a priori .

cioè aggiungere una stringa aggiuntiva ai nomi che mi vengono proposti, e non .

serenella
serenella

Questa pagina non carica correttamente Google Maps. A me risponde cosi…..

Alessandro
Alessandro

Ciao gianluca, ho generato una api key, e volevo sapere se avevi possibilita di aiutarmi per inserire un autocompletamento degli indirizzi stradali di google map in una cella di excel!!! grazie in anticipo

diego
diego

Ciao Gianluca,
semplice e diretto. Grazie!

Voglio aggiungere il mio contributo e fare una domanda.

– Se si vuole fare in modo che google ci risponda nel formato di indirizzo e i nomi delle città in italiano, dobbiamo aggiungere alla chiamata alla libreria il parametro language=it. Quindi diventa una cosa del tipo

https://maps.google.it/maps/api/js?key=QUI_CI_VA_LA_KEY&libraries=places&language=it

– vorrei fare in modo che l’indirizzo suggerito, contenesse anche il cap; non riesco a trovare niente nella documentazione. Sai se è possibile e come si fa?

luca
luca

Ciao Gianluca, tu sei un professionista io un semplice privato che sta cercando di farsi un sito dignitoso e vorrei appunto visto l’argomento, dare la possibilita all utente trovare una via precisa grazie all’aiuto di google maps…ma non so cosa e come devo fare.
grazie
luca