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.
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
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!
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
Grazie! Tu sei troppo avanti!
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!
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&map_action=map&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
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
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&libraries=places
a cosi:
http://maps.google.it/maps/api/js?key=XXXXXXX&sensor=false&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 :-)
Ciao Gianluca, sai come posso fare uno script che lancia request alle API (geolocalizzazione, maps, meteo) ogni x minuti?
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
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
Ciao Luca, possiamo studiare una soluzione! mandami una email in privato a gianluca.ghettini@gmail.com e saprò sicuramente aiutarti! ciao grazie
Ciao Gianluca,
semplice e diretto. Grazie!
Voglio aggiungere il mio contributo e fare una domanda.
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
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
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!
Questa pagina non carica correttamente Google Maps. A me risponde cosi.....
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
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
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 .
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
Ciao gianluca,
sai per caso se google fornisce anche un id univoco per l'indirizzo inserito?
grazie