javascript - examples - API de Google Maps v3-Autocompletar(dirección)

maps autocomplete javascript

Question

Intentando completar automáticamente el trabajo para mi aplicación Google Maps.

Aquí está el código actual:

HTML

<input type="text" class="clearText" id="address" name="address" value="" size=20 autocomplete="off">

Javascript

 var input = document.getElementById(''address'');
var options = {
componentRestrictions: {country: ''au''}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);

Lamentablemente, no sucede nada al escribir una dirección.

¿Algunas ideas?

Gracias por adelantado.

Editar: en realidad estoy recibiendo el siguiente error:

Unkeught TypeError: no se puede leer la propiedad ''autocompletar'' de indefinido

No estoy seguro de por qué, el código se coloca en la función de inicialización de mi mapa.

Edición 2: arreglado. Responda abajo.

Answer 1

Fijo. La biblioteca de autocompletar es en realidad una biblioteca separada que debe cargarse explícitamente. La siguiente línea resolvió el problema.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places‌​&sensor=false"></scr‌​ipt>

Answer 2

Gracias Matt por la respuesta! De alguna manera, parece ser importante no omitir el atributo type="text/javascript" en la etiqueta <script> cuando se usan libraries=places .

No funciona:

<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false&callback=initMap"></script>
<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false"></script>

Trabajos:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

La variante de devolución de llamada también funciona (con la función initMap definida):

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&callback=initMap"></script>

Esto parece ser consistente con otra respuesta de SO e inconsistente con la documentación oficial (a menos que proporcionar la key en la url haga la diferencia).

Answer 3

Tienes que agregar ''defer async'' al atributo de script, como este:

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>

Answer 4

Tu solución también funcionó para mí. Estoy usando el plugin de GeoComplete jQuery http://ubilabs.github.com/geocomplete/ y las instrucciones en su página de inicio dicen que use esto

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>

Pero no funcionó para mí y estaba recibiendo el mismo error.

Consulte la documentación de la API de Google Maps aquí https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library