Estoy tratando de tener un formulario que use la API de Autocompletar de Google para completar un montón de campos de texto después de hacer clic en el nombre del establecimiento. No estoy muy familiarizado con Javascript, por lo que este es un poco complicado para mí.
Tal como está, actualmente lo estoy obteniendo para completar el Nombre en el cuadro de entrada y la latitud y longitud. Pero todo lo demás (dirección, dirección2, ciudad, estado) se rellena con "indefinido". Cualquier idea sobre cómo hacer que esos valores se llenen en esos campos de entrada.
<html> <head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API&libraries=places"></script> <script> function initialize() { var input = document.getElementById('searchTextField'); const options = { componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, types: ["establishment"], }; var autocomplete = new google.maps.places.Autocomplete(input, options); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); document.getElementById('locationName').value = place.name; document.getElementById('addr').value = place.adr_address; document.getElementById('addr2').value = place.address2; document.getElementById('city').value = place.city; document.getElementById('state').value = place.state; document.getElementById('lat').value = place.geometry.location.lat(); document.getElementById('long').value = place.geometry.location.lng(); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /> <input type="text" id="locationName" name="locationName" /> <input type="text" id="addr" name="addr" /> <input type="text" id="addr2" name="addr2" /> <input type="text" id="city" name="city" /> <input type="text" id="state" name="state" /> <input type="hidden" id="lat" name="lat" /> <input type="hidden" id="long" name="long" /> </body> </html>Lo he descubierto en caso de que alguien esté buscando la respuesta en el futuro.
Utilicé console.log(place) y pude darme cuenta de que estaba intentando acceder al objeto address_components incorrectamente. Por ejemplo, se accedería a la información de la ciudad a través place.address_components[4].long_name .
Solución bastante simple en general.