I am trying to to have a form that uses the Google Autocomplete API to populate a bunch of text fields after they click the name of the establishment. I am not super familiar with Javascript, so this one is somewhat of a struggle for me.
As is, I am currently getting it to populate the Name into the input box and the latitude and longitude. But everything else (address, address2, city, state) gets populated with "undefined". Any ideas on how to get those values to populate into those input fields.
<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>
I have figured it out in case someone is looking for the answer down the road.
I used console.log(place) and was able to figure out I was attempting to access the address_components object incorrectly. For example, city information would be accessed through place.address_components[4].long_name.
Overall pretty simple fix.