How to parse json (jquery) from google geocoding?

Question

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?

@gdoron I know that i can, only the upvoter himself knows if it perhaps was me or not... — Christoph
– Christoph, Commented Jun 13, 2012 at 9:51
@gdoron Perhaps, then i didn't want to upvote for another reason... well, who knows >.< — Christoph
– Christoph, Commented Jun 13, 2012 at 9:53

BrendanMcK · Accepted Answer · 2012-06-13 10:49:04Z

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.

mgraph · Accepted Answer · 2012-06-13 11:21:41Z

1

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

edited Jun 13, 2012 at 11:21

user142162

answered Jun 13, 2012 at 9:43

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

3 Comments

Denis Over a year ago

sorry my mistake, in the real code was correct case: "jsonp" and still do not work. give me a moment, i'll show it in jsfiddle

Denis Over a year ago

maybe someone knows another way to parse that?

BrendanMcK Over a year ago

This won't help since the google maps API doesn't support jsonp (which is json with a callback wrapped around it so it can be used as src to a script tag); it returns plain json regardless.

Joe Bowman · Accepted Answer · 2012-06-13 10:13:39Z

0

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!

answered Jun 13, 2012 at 10:13

Joe Bowman

5042 silver badges8 bronze badges

3 Comments

Denis Over a year ago

nope, array is not empty, looks like string is not valid json, but i can not undestand why. dl.dropbox.com/u/38721261/1.PNG dl.dropbox.com/u/38721261/2.PNG

Joe Bowman Over a year ago

Firefox Web Developers toolbar suggests suggests a problem with the JSON - it doesn't like the "results" label...

BrendanMcK Over a year ago

The json is fine. The problem is that when using datatype="jsonp", jQuery will load it via a script tag; and json isn't valid standalone javascript; it needs the callback(...) wrapper to be parsable in that context. See my answer for more details.

Behnam Esmaili · Accepted Answer · 2012-06-13 10:25:55Z

0

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" ]
            },

            .
            .
            .

edited Jun 13, 2012 at 10:25

answered Jun 13, 2012 at 10:06

Behnam Esmaili

5,9776 gold badges36 silver badges64 bronze badges

4 Comments

Behnam Esmaili Over a year ago

very interesting !i have checked it with firebug.i saw that response have received.it seems this is a bug in jquery.

Denis Over a year ago

and is that valid json in responce? can you parse that?

Behnam Esmaili Over a year ago

yes it is valid jason as well.but jquery attept to parse that fails with error.

Denis Over a year ago

and i got the same in firebug. dl.dropbox.com/u/38721261/2.PNG but there are parse error so i can not parse this :( any ideas?

Collectives™ on Stack Overflow

How to parse json (jquery) from google geocoding?

4 Answers 4

Comments

3 Comments

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related