RICERCA LOCALITA COMPLETAMENTO AUTOMATICO GOOGLE API

14/08/2016

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


Torna alla home

Commenti

22 commenti


luca (luke.cap@hotmail.com)
il 21 Febbraio 2017 alle 12:43

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

Rispondi


Gianluca (Admin)
il 21 Febbraio 2017 alle 12:51

Si, ogni posto e' accompagnato da un id univoco, puoi riceverlo dalle api o cercare luoghi per id
https://developers.google.com/places/place-id

Rispondi


bofu2013@gmail.com (bofu2013@gmail.com)
il 4 Giugno 2017 alle 16:39

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!

Rispondi


Gianluca (Admin)
il 4 Giugno 2017 alle 16:51

Ciao! ci sono 2 metodi principali:

primo metodo:
effettuare un reverse dell'indirizzo IP dell'utente, operazione semplicissima server-side ma che non da risultati molto precisi (l'indirizzo pubblico appartiene all'ISP, quindi la risoluzione massima sarà la città, comune o regione... non molto accurato).

secondo metodo:
utilizzare la geolocalizzazione del browser stesso utilizzando l'API navigator.geolocation. Chrome e molti altri la supportano. Esegui questo codice nella pagina html:

[code language="javascript"]
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
alert('la tua posizione: ' + lat + ' ' + lon);
}, function(){
// errore durante geolocalizzazione!
});
} else {
// geolocalizzazione non supportata!
}
[/code]

Ovviamente invece di eseguire una alert() mostrando lat e lon, invi questi dati al server oppure puoi usarli per impostare un marker in una mappa Google Maps sulla pagina

Puoi vedere come creare mappe Google Maps in un altro articolo del mio blog
Per dettagli sulla geolocalizzazione vedi questa pagina -> https://dev.w3.org/geo/api/spec-source.html

Rispondi


bofu2013@gmail.com (bofu2013@gmail.com)
il 4 Giugno 2017 alle 17:03

Grazie! Tu sei troppo avanti!

Rispondi


Matteo (matsanta@hotmail.it)
il 24 Gennaio 2018 alle 00:19

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!

Rispondi


Gianluca (Admin)
il 24 Gennaio 2018 alle 00:48

certo! basta che apri una nuova finestra del browser (o nella stessa finestra) e vai all'indirizzo URL google https://www.google.com/maps/@?api=1&amp;map_action=map&amp;parameters

dove "parameters" sono i parametri di navigazione ossia partenza, arrivo, modalità (auto, treno, a piedi etc..)

Qui trovi tutta la documentazione per creare i parametri giusti

https://developers.google.com/maps/documentation/urls/guide#directions-action

Rispondi


Matteo (matsanta93@gmail.com)
il 2 Febbraio 2018 alle 15:44

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

Rispondi


Gianluca (Admin)
il 2 Febbraio 2018 alle 15:54

dopo alcuni utilizzi devi settare la API key nell'url quando carichi la libreria. Vedi qui:
https://developers.google.com/maps/documentation/javascript/places

In pratica devi aggiungere il parametro key=XXXXXXXX all'url dove carichi la libreria Google Maps

da cosi:

http://maps.google.it/maps/api/js?sensor=false&amp;libraries=places

a cosi:

http://maps.google.it/maps/api/js?key=XXXXXXX&amp;sensor=false&amp;libraries=places

Non ti fanno usare la libreria all'infinito, devi settare una chiave. La chiave api è gratuita e la puoi generare dal tuo account gmail

vedi qui per come fare:
https://developers.google.com/maps/documentation/javascript/get-api-key

se superi mezzo milione di richieste al giorno il servizio diventa a pagamento :-)

Rispondi


antonio (antonioattimo@hotmail.it)
il 27 Marzo 2018 alle 15:14

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

Rispondi


Gianluca (Admin)
il 28 Marzo 2018 alle 22:47

Ciao, certo, metti tutto il tuo codice in una funzione e poi richiama quella funzione ogni x secondi con setTimeout(). Ecco un esempio: https://www.w3schools.com/jsref/met_win_settimeout.asp

Rispondi


luca (luca.aveani@docsparcels.com)
il 15 Agosto 2018 alle 18:52

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

Rispondi


Gianluca (Admin)
il 15 Agosto 2018 alle 18:59

Ciao Luca, possiamo studiare una soluzione! mandami una email in privato a gianluca.ghettini@gmail.com e saprò sicuramente aiutarti! ciao grazie

Rispondi


diego (diego.barrera80@gmail.com)
il 4 Ottobre 2018 alle 09:30

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&amp;libraries=places&amp;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?
Rispondi


Gianluca (Admin)
il 4 Ottobre 2018 alle 09:58

Ciao Diego, certamente!
devi specificare quali elementi dell'indirizzo vuoi, esiste un parametro specifico da passare nell'URL come hai fatto per la lingua. Puoi formattare l'indirizzo come vuoi, più o meno come si fa per le date. Vedi i dettagli qui:
https://developers.google.com/places/web-service/details#fields

Rispondi


Alessandro (doc.tato@gmail.com)
il 12 Ottobre 2018 alle 13:02

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

Rispondi


Gianluca (Admin)
il 12 Ottobre 2018 alle 13:48

Ciao Alessandro, volentieri ma dovresti spiegarmi meglio cosa intendi fare. L'autocompletamento Google API è in ambito web (HTML+Javascript) non riguarda Excel direttamente. Cosa intendi esattamente per "inserire un autocompletamento degli indirizzi stradali di google map in una cella di excel" ? :-) Grazie!

Rispondi


serenella (serenella.angelilli@gmail.com)
il 18 Ottobre 2018 alle 12:21

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

Rispondi


emanuele (emanuele@webcola.it)
il 5 Novembre 2018 alle 19:50

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

Rispondi


Gianluca (Admin)
il 5 Novembre 2018 alle 19:59

Ciao Emanuele,
qui trovi tutta la lista di parametri da specificare nella URL per formattare i risultati come vuoi:
https://developers.google.com/places/web-service/autocomplete#place_autocomplete_responses

Rispondi


emanuele (emanuele@webcola.it)
il 6 Novembre 2018 alle 11:40

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 .

Rispondi


Gianluca (Admin)
il 7 Novembre 2018 alle 17:03

In questo caso devi scendere più a basso livello ed usare l'autocompleteService messo a disposizione sempre nelle Google maps API:

https://developers.google.com/maps/documentation/javascript/places#place_autocomplete_service

Devi registrare un listener nel form di testo dove l'utente scrive l'indirizzo con la callback che prende il testo corrente e lo passa all'autocompleteService. Questo servizio ti restituisce la lista dei suggerimenti come oggetti JSON che puoi poi manipolare come vuoi. Ti crei la tua lista di suggerimenti personalizzati utilizzando i componenti base restituiti dall'autocompleteService e poi passi questa lista di stringhe al dropdown nella pagina web

Rispondi


Il tuo nome o email (Se usi l'email potrai essere notificato delle risposte)
Il tuo messaggio