Come creare un campo indirizzo automatico con google maps api?

Question

Utilizzando l'API di Google Maps e JQuery Mi piacerebbe avere un campo Indirizzo che durante la digitazione completerà automaticamente l'indirizzo inserito. Come questo potrebbe essere raggiunto?

Answer 1

Bene, meglio tardi che mai. L'API di Google Maps v3 ora fornisce il completamento automatico degli indirizzi.

documentazione API sono qui: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

Un buon esempio è qui: http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

Answer 2

Ne dubito davvero: l'API di google maps è ideale per geocodificare gli indirizzi noti, ma in genere restituisce dati adatti per le operazioni in stile autocomplete. Non cè la sfida di non colpire l'API in modo tale da consumare molto rapidamente il limite della query di geocodifica.

Answer 3

Alla deriva un po ', ma sarebbe relativamente facile riempire automaticamente la città/stato degli Stati Uniti o CA Città/Provenza quando l'utente inserisce il suo codice postale utilizzando una tabella di ricerca.

Ecco come si potrebbe fare se si potesse obbligare la gente a piegare la tua volontà: entra

1. Utente: postale (zip) Codice

   si riempie: stato, città (provincia, per il Canada)

2. utente inizia a digitare: della via

   0.123.

   È: riempimento automatico

3. È visualizzazione: un intervallo di numeri di indirizzi consentiti

   utente: inserisce il numero

Fatto.

Ecco come è naturale per le persone a farlo: entra

1. iscritto: Numero indirizzo

   È: non fanno nulla

2. utente inizia a digitare: nome della via

   Si: riempimento automatico, attingendo da un elenco enorme di tutte le strade del paese

3. utente immette: città

   È: riempimento automatico

4. utente immette: Stato/provenza

   Tu: è mosto h riempimento automatico di alcuni caratteri?

5. Tu: compilare automaticamente il codice postale (zip), se è possibile (perché alcuni codici sono a cavallo delle città).

---

Ora sapete perché la gente carica $$$ per fare questo. :)

Per l'indirizzo, considerare che vi sono due parti: numerica e nome della via. Se hai il codice postale, puoi restringere le strade disponibili, ma la maggior parte delle persone inserisce prima la parte numerica, che è backwa

Answer 4

Below I split all the details of formatted address like City, State, Country and Zip code. 
So when you start typing your street name and select any option then street name write over street field, city name write over city field and all other fields like state, country and zip code will fill automatically. 
Using Google APIs. 
------------------------------------------------ 
<script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
<script type="text/javascript"> 
google.maps.event.addDomListener(window, 'load', function() { 
    var places = new google.maps.places.Autocomplete(document 
      .getElementById('txtPlaces')); 
    google.maps.event.addListener(places, 'place_changed', function() { 
     var place = places.getPlace(); 
     var address = place.formatted_address; 
     var value = address.split(","); 
     count=value.length; 
     country=value[count-1]; 
     state=value[count-2]; 
     city=value[count-3]; 
     var z=state.split(" "); 
     document.getElementById("selCountry").text = country; 
     var i =z.length; 
     document.getElementById("pstate").value = z[1]; 
     if(i>2) 
     document.getElementById("pzcode").value = z[2]; 
     document.getElementById("pCity").value = city; 
     var latitude = place.geometry.location.lat(); 
     var longitude = place.geometry.location.lng(); 
     var mesg = address; 
     document.getElementById("txtPlaces").value = mesg; 
     var lati = latitude; 
     document.getElementById("plati").value = lati; 
     var longi = longitude; 
     document.getElementById("plongi").value = longi;    
    }); 
}); 

Answer 5

Ci sono alcune librerie impressionante, come select2, ma non corrisponde il mio bisogno . Ho creato un campione da zero per poter utilizzare un testo di input semplice.

Uso solo bootstrap e JQuery.

Spero che sarà utile

`https://jsfiddle.net/yacmed/yp0xmdf5/` 

Answer 6

E 'facile, ma gli esempi API di Google vi darà spiegazione dettagliata di come è possibile ottenere la mappa per visualizzare la posizione inserito. Solo per la funzione di completamento automatico, puoi fare qualcosa di simile.

Innanzitutto, abilitare il servizio Web API di Google Places. Ottieni la chiave API. Dovrai usarlo nel tag script nel file html.

<input type="text" id="location"> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY_HERE]&libraries=places"></script> 
<script src="javascripts/scripts.js"></scripts> 

Utilizzare il file di script per caricare la classe di completamento automatico. Il tuo file scripts.js avrà un aspetto simile a questo.

// scripts.js custom js file 
$(document).ready(function() { 
    google.maps.event.addDomListener(window, 'load', initialize); 
}); 

function initialize() { 
    var input = document.getElementById('location'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
}