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

Leave a Reply

avatar
antonio

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

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

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

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

Grazie! Tu sei troppo avanti!

luca

Ciao gianluca,
sai per caso se google fornisce anche un id univoco per l’indirizzo inserito?
grazie

wpDiscuz