CODEWITHSUNDEEP
javascriptjquerygoogle-code
Denis
Denis

Reputation: 2469

How to parse json (jquery) from google geocoding?

I'm trying to get city name using latidute and longitude.

Google geocoding support this option and called "Reverse geocoding". And as written there in the sample i have to make a get request to this link:

http://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&sensor=true_or_false

it returns me array in json, you can try.

how i can parse this json in jquery?

i'm tried to do this like:

   $.ajax({
      url: 'http://maps.googleapis.com/maps/api/geocode/json',
      type: 'get',
      data: {
        'latlng':lat+","+longit,
        'sensor': false
      },
      dataType: 'jsonp',
      success: function(result){

        console.log(results)

      },
      error: function(xhr,ajaxOptions,thrownError){
        console.log(xhr.status);
        console.log(ajaxOptions);
        console.log(thrownError);
      }

  })

I get this array, but can not parse. it says:

Uncaught SyntaxError: Unexpected token :

how do i can fix this?

Upvotes: 3

Views: 4046

Answers (4)

mgraph
mgraph

Reputation: 15338

Try dataType: jsonp, instead of dataType: jsomp,.

Upvotes: 1

BrendanMcK
BrendanMcK

Reputation: 14498

Short answer; you can't: JSONP is not supported here (or at least is not actually documented as being supported), use the Geocoder class instead.

The Google Geocoding APIs say:

Looking to use this service in a JavaScript application? Check out the Geocoder class of the Google Maps API v3.

Seems Google only serves up plain JSON, which you can't parse in your own page due to same-origin policy - but which you could consume if you were eg. a php app running on another server that doesn't have that restriction. So if you want to use this on a web page, using their Geocoder class is the way to go - and it will do the work of parsing for you anyhow.

--

When you use dataType="jsonp", jQuery attempts to load the result by creating a SCRIPT element and setting the src attribute to the query string. The browser then ends up getting the returned json, and attempts to parse it as through it were a self-contained javascript file - and that's what's failing.

The problem is that JSON is not valid plain standalone javascript: for example, the returned JSON string:

{ "results" : [ { "address_components" : [

... fails to parse - and that's what's causing the errors. If it was, on the other hand,

var foo = { "results" : [ { "address_components" : [

or

callback({ "results" : [ { "address_components" : [ ...  } )

then it would be valid javascript. The latter is what jsonp is actually relying on returning.

Bottom line is that you are getting back valid JSON, but because of the same origin policy, you can't access it directly via XmlHttpRequest; and because it's not JSONP with a function wrapped around it, you can't use it via the SCRIPT backdoor that JSONP relies on to get around the same origin issue. Your only option for using this on a web page is to use the classes that Google provide you - since they are also from the Google site, they can access the JSON and parse it successfully - and return the processed results back to you.

Upvotes: 2

Behnam Esmaili
Behnam Esmaili

Reputation: 5967

try adding following in ajax setting:

 contentType: "application/json; charset=utf-8";

edit :

this is what i saw with firebug:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "285",
               "short_name" : "285",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "Bedford Ave",
               "short_name" : "Bedford Ave",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Williamsburg",
               "short_name" : "Williamsburg",
               "types" : [ "neighborhood", "political" ]
            },
            {
               "long_name" : "Brooklyn",
               "short_name" : "Brooklyn",
               "types" : [ "sublocality", "political" ]
            },
            {
               "long_name" : "New York",
               "short_name" : "New York",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Kings",
               "short_name" : "Kings",
               "types" : [ "administrative_area_level_2", "political" ]
            },

            .
            .
            .

Upvotes: 0

Joe Bowman
Joe Bowman

Reputation: 504

The problem appears to be that the ajax request is not returning anything. Presumably an empty string is not valid JSON?

Edit: And now it is! The first time I attempted the 'fiddle' below, Firebug reported an empty response to the request!

Upvotes: 0

Related Questions