I'm using the geocoding API to convert an address to long and lat, and then assigning a hidden input value with the recieved coordinates, instead of using this data to plot on a map.
I'm using the client facing javascript library, and here is my javascript which is slightly modified.
<script>
function initMap() {
var geocoder = new google.maps.Geocoder();
geocodeAddress(geocoder);
console.log('initMap');
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
console.log('geocodeAddresses');
geocoder.geocode({'address': address}, function(results, status) {
console.log('geocoder.geocode');
if (status === google.maps.GeocoderStatus.OK) {
console.log('status OK');
document.getElementById('lnglat').value = results[0].geometry.location;
console.log(results[0].geometry.location);
} else {
console.log('status error');
}
});
}
</script>
When I see the output in firebug, I can see "initmap", "geocodeAddresses" however nothing from geocoder.geocode.
I can't see any reason why, I'm not getting any errors in firebug, all of the required files are there and my API key is included and valid.
Thanks for your time
Edit: It appears as though geocoder.geocode isn't run at all, when I add a console.log at the end of geocodeAddress, it completely skips geocoder.geocode. Why would this be as no errors are shown in firebug.
When you submit your form it will reload the page and will never call geocoder function.
Add action="javascript:void(0);" on <form> to stop it from reloading the page and onclick event on <button> to call your geocoder function.
<body>
<form action="javascript:void(0);" id="search">
<input name="query" type="text" required/>
<input name="l" type="text" id="address" required/>
<input name="lnglat" type="text" id="lnglat" />
<button id="submit" onclick="query()" disabled="true">Submit</button>
</form>
</body>