¿Cómo hacer que un campo de dirección de autocompletar con google maps api?

Question

Uso de Google Maps API y JQuery Me gustaría tener un campo de Dirección que al escribirlo completará automáticamente la dirección ingresada allí. ¿Cómo se podría lograr esto?

Answer 1

Bueno, será mejor tarde que nunca. Google Maps API v3 ahora proporciona autocompletado de direcciones.

documentos de la API está aquí: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

Un buen ejemplo es aquí: http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

Answer 2

Realmente lo dudo: Google Maps API es ideal para geocodificar direcciones conocidas, pero generalmente devuelve datos que son adecuados para operaciones de autocompletado. No tenga en cuenta el desafío de no golpear la API de forma tal que consuma su límite de consulta de geocodificación muy rápidamente.

Answer 3

Un poco a la deriva, pero sería relativamente fácil rellenar automáticamente la ciudad/estado de EE. UU. O CA/Provence cuando el usuario ingrese su código postal mediante una tabla de búsqueda.

Así es como podría hacerlo si se puede obligar a la gente a plegarse a su voluntad: entra

1. usuario: postal (ZIP) Código

   os llene: estado, ciudad (provincia, para Canadá)

2. El usuario comienza a ingresar: streetname

   Usted: relleno automático

3. pantalla Usted: una gama de números de direcciones permitidas

   usuario: introduce el número

Hecho.

Así es como es natural para la gente lo haga:

1. usuario entra: número dirección

   Usted: no hacen nada

2. usuario empieza a escribir: calle nombre

   Usted: relleno automático, dibujo de una lista masiva de todas las calles del país

3. usuario introduce: ciudad

   Usted: relleno automático

4. usuario introduce: Estado/provence

   Usted: es wort h ¿Autocompletar algunos caracteres?

5. Usted: autocomplete código postal (zip), si puede (porque algunos códigos se encuentran en las ciudades).

---

Ahora sabes por qué las personas cobran $$$ para hacer esto. :)

Para la dirección de la calle, considere que hay dos partes: numérica y calle. Si tiene el código postal, puede reducir las calles disponibles, pero la mayoría de las personas ingresan primero la parte numérica, que es 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

Hay algunas bibliotecas impresionantes como select2, pero no coincide con mi necesidad . He hecho una muestra desde cero para utilizar un texto de entrada simple.

Solo uso bootstrap y JQuery.

espero que sea útil

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

Answer 6

Es fácil, pero los ejemplos de la API de Google que dan explicación detallada de cómo se puede conseguir el mapa para ver la ubicación introducida. Para la función de autocompletar solo, puedes hacer algo como esto.

Primero, habilite el servicio web de la API de Google Places. Obtenga la clave API. Tendrá que usarlo en la etiqueta del script en el archivo 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> 

Utilice el archivo de secuencia de comandos para cargar la clase de autocompletar. Su archivo scripts.js se verá algo así.

// 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); 
}