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

13
Leave a Reply

avatar
6 Comment threads
7 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
7 Comment authors
lucaantonioMatteoMatteoGianluca Recent comment authors
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

antonio
antonio

Ciao Gianluca, sai come posso fare uno script che lancia request alle API (geolocalizzazione, maps, meteo) ogni x minuti?

Matteo
Matteo

Ciao Gianluca, ho un problema. Ho seguito le istruzioni da te fornite ed è sempre funzionato tutto correttamente.
Da ieri, nel momento in cui inizio ad inserire un indirizzo nel campo input mi compare “Spiacenti, si è verificato un problema”.
Il codice è:

function init()
{
var input = document.getElementById(‘input’);
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, ‘load’, init);

Sai dirmi cosa può essere successo?
Grazie, buona giornata.
Matteo

Matteo
Matteo

Ciao Gianluca! Sai come posso completare questo script per permettere che, con un submit, venga aperta l’app di Google Maps e parta la navigazione verso l’indirizzo inserito? Grazie mille!

bofu2013@gmail.com
bofu2013@gmail.com

Ciao Gianluca! Sai come si fa per avere un indirizzo preciso del visitatore del web, e mettere nel input come placeholder giusto per suggerire agli utenti? Grazie Gianluca!

bofu2013@gmail.com
bofu2013@gmail.com

Grazie! Tu sei troppo avanti!