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>