Google Maps API Geocode Synchronously

22,639

Solution 1

The Geocoder calls your callback function with the value. That's the only way to do it. If it were synchronous, your script would freeze while it waited for the Geocode to process. There really isn't any reason to do it like that.

What exactly are you trying to accomplish?

Solution 2

Yes, what you are trying to achieve is possible, although a synchronous request is not needed.

Look at this code

function StoreGeo()
 {
        var address =  $('input[name=zipcode]').val() + ', ' + $('input[name=city]').val();
 geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var ll = results[0].geometry.location.toString();

            llarr = ll.replace(/[\(\) ]/g, '').split(',');

                for(i = 0; i < llarr.length;i++)
                {
                    $('#form').append($('<input type="hidden" name="'+(i == 0 ? 'lat' : 'long')+'">').val(llarr[i]));
                }

                $('#form').submit();
      } 
      else
      {
        alert(status);
      }
    });

    $('#form').unbind('submit');
    return false;
 }

$(document).ready(function () { 

    //init maps
    geocoder = new google.maps.Geocoder();

    $('#form').bind('submit',function() {
        StoreGeo();
    });

}); 

So, attach submit handler to the form, when it is submitted do the geo request based on the address info from your form. But at the same time postpone submitting by returning false in the handler. The response handler will make 2 hidden textfields 'lat' and 'long' and store the response. finally the form is submitted by client script, including the two new fields. At the server side you can store them in the DB.

!! Note that this is possible, but is probably against the google terms, like noted above.

Solution 3

I simply use a flag during form submit to know when submit should pass or when it should wait for geocoding. When geocoding is done it will then re-submit the form again.

    var hasGeocoded = false;

    searchFrom.on('submit', function(){
        //If not geocoded yet
        if (!hasGeocoded) {
            var geocoder = new google.maps.Geocoder();
            var location = locationEl.val();
            geocoder.geocode({'address': location}, function (results, status) {
                hasGeocoded = true;

                if (status == google.maps.GeocoderStatus.OK) {
                    $('#coords').val(
                        results[0].geometry.location.lat() + ',' + results[0].geometry.location.lng()
                    );
                }

                searchFrom.submit();
            });

            return false; //wait for geocoder to finish and re-submit the form
        }

        return true;
    });
Share:
22,639
giroy
Author by

giroy

nub

Updated on July 09, 2022

Comments

  • giroy
    giroy almost 2 years

    I was wondering if its possible to geocode something using googlemaps api synchronously so instead of waiting for a callback function to be called, it would wait for a value to be returned. Has anyone found a way to do something like this.

    P.S.: I'm using version 3 of the api