How to call google map geocode service with jquery ajax

Question

I'm trying to get the LatLng from google map geocode api. my code is below with address values is "New York, NY"

$.ajax({
    url: 'http://maps.googleapis.com/maps/api/geocode/json',
    data: {
        sensor: false,
        address: address
    },
    success: function (data) {
        alert(data)
    }
});

But I'm not getting any values in alert.

Thanks for any help.

Bodyguard

What are you getting? Please use Firebug (or equivalent) for debugging. What does te request contain? – Clevey

@Fokko Driesprong checked in firebug, getting data as empty and url as maps.googleapis.com/maps/api/geocode/… and when pasting this url in browser address bar giving the results. :-) – Bodyguard

Answer 1

You will need to contact the API regarding the rules.

$.getJSON( {
    url  : 'https://maps.googleapis.com/maps/api/geocode/json',
    data : {
        sensor  : false,
        address : address
    },
    success : function( data, textStatus ) {
        console.log( textStatus, data );
    }
} );

Edit:

How dumb of me, shouldn't be on stackoverflow in the morning! The problem is a cross-domain request. For security reasons this is not allowed. See: How to make cross-domain AJAX calls to Google Maps API?

Please use Google's own Geocoding client.

Clevey

thanks again. I tried with the above code but no luck. By the way, before function i added "success:" – Bodyguard

I tried this solution, but I'm getting "Uncaught SyntaxError: Unexpected identifier" error for address parameter in data. Can somebody help me how to resolve this please? – Rochus

Answer 2

there is no need to make use of jquery, Google maps javascript API v3 has build in its own functions which makes the API easy to use.

https://developers.google.com/maps/documentation/javascript/geocoding https://developers.google.com/maps/documentation/geocoding/intro

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
    }
});

Cella

Just as a side note, if you will be performing look-ups for international addresses, it's a good idea to use the componentRestrictions parameter rather than the address. geocoder.geocode({ componentRestrictions: { country: country, postalCode: zip } }, function (results, status) { } }); This ensures that the API doesn't mis-interpret the values you are passing in as something it isn't (country as a city, etc) – Sociology

Answer 3

If anyone is seeking help on this topic, this is how I have done it. Note this is a reverse lookup, but a forward lookup should work the same way:

`

    function getLocation() {
var latdegrees=40.2298;
var londegrees=-41.88754;
     var url = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latdegrees + "," + londegrees + "YOUR API KEY";
    $.getJSON(url,function (data, textStatus) {
           var streetaddress=data.results[0].formatted_address;
          return streetaddress;
      });
     }`

Downpipe

Even though reverse geocoding wasn't asked for. Thanks for adding that anyway! – Enjambment

Answer 4

V3 geocoding webservice doesn't support JSONP requests, but it's still available in V2

See: http://blog.futtta.be/2010/04/09/no-more-jsonp-for-google-geocoding-webservice/

Eustis

Answer 5

This is how I did it. Geocoder seems like is creating it's own callback.

geo.geocode({ 'address': myaddress }, function(data, status) {
    if (status == google.maps.GeocoderStatus.OK) { 
        var myylocation = data[0].geometry.location;
        lat = myylocation.lat();
        lng = myylocation.lng();
    }
});

Suzettesuzi

Answer 6

or specify dataType to jsonp?

$.ajax({
    url: 'http://maps.googleapis.com/maps/api/geocode/json',
    data: {
        sensor: false,
        address: address
    },
    dataType:'jsonp',
    success: function (data) {
        alert(data)
    }
});

Eustoliaeutectic