I already have a button in place that is running multiple functions from getting the ain value with a text input.
I would like to use something like const ain =$("#text").val(); to get the ain and fetch the lat longs with the url variable you made and send them to a google map script that I am locally hosting directly without adding any lat long results to the inner html. The google map script is very basic.The html and js for it is below. I would need maybe a postmessage to send the lat longs and an event listener to receive them unless there is a better way. I would then have to most likely use the map.setCenter({lat: x, lng: y}); method found in the google map api to re center the map with the coordinates received. The google map is an iframe on the page with the text input that I am trying to update when the user submits an ain value.
<div id="floating-panel">
<input id="address" type="textbox" value="900 S Fremont Ave">
<input id="submit" type="button" value="Search">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: {lat: 34.084914, lng: -118.150043},
mapTypeId: google.maps.MapTypeId.HYBRID,
labels: true,
tilt: 0
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Search was not successful for the following reason: ' + status);
}
});
}
</script>
Any suggestions would be greatly appreciated. Thanks for the great help Ben.