CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-geocodergoogle-geocoding-api
PublicDisplayName
PublicDisplayName

Reputation: 317

geocoder.geocode() not being executed

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.

Upvotes: 1

Views: 2071

Answers (2)

shadow00
shadow00

Reputation: 245

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.

Check this plunker

  <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>

Upvotes: 1

Ronnie Smith
Ronnie Smith

Reputation: 18585

Make sure your Google API script comes before your javascript and you don't need a callback in the URL

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD77MKXXXX-T_xxxewvLrhFqn5cA0m-xxx"></script>

function geoCode(street,city,state,zip){
    var geocoder = new google.maps.Geocoder();
    var address = street + ' ' + city + ' ' + state + ' ' + zip;
    geocoder.geocode({'address': address}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var myResult = results[0].geometry.location; // reference LatLng value
            var myArray = myResult.toString().slice(1, -1).split(', ');
            alert (parseFloat(myArray[0]) + parseFloat(myArray[1]));

        } else {
            alert('Map location not found.  Please adjust address.  Error: ', status);
        }
    });
}

Upvotes: 1

Related Questions