Parse json from google maps reverse geocode?

Rudiger Kidd picture Rudiger Kidd · Mar 5, 2014 · Viewed 14.5k times · Source

How can I parse through the response from a reverse geocode using Google Maps JavaScript API v3.

geocoder.geocode({'latLng': latlng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        infowindow.setContent(results[0].formatted_address);
                        infowindow.open(map, marker);
                    }
                } 

This displays the formatted address fine in the popup, but I'm trying to take other bits out of the response, ideally the street name or route (if no street name found). But when using obj = JSON.parse(json); I keep getting this error in the console.

SyntaxError: JSON.parse: unexpected character

if it were PHP I would do a bunch of for each loops. Is it possible to do something similar in JavaScript ?

heres a sample

{
   "results" : [
  {
     "address_components" : [
        {
           "long_name" : "131",
           "short_name" : "131",
           "types" : [ "street_number" ]
        },
        {
           "long_name" : "Stubbington Avenue",
           "short_name" : "Stubbington Ave",
           "types" : [ "route" ]
        },
        {
           "long_name" : "Portsmouth",
           "short_name" : "Portsmouth",
           "types" : [ "locality", "political" ]
        },
        {
           "long_name" : "Portsmouth",
           "short_name" : "Portsmouth",
           "types" : [ "administrative_area_level_3", "political" ]
        },
        {
           "long_name" : "Portsmouth",
           "short_name" : "Portsmouth",
           "types" : [ "administrative_area_level_2", "political" ]
        },
        {
           "long_name" : "England",
           "short_name" : "England",
           "types" : [ "administrative_area_level_1", "political" ]
        },
        {
           "long_name" : "United Kingdom",
           "short_name" : "GB",
           "types" : [ "country", "political" ]
        },
        {
           "long_name" : "PO2",
           "short_name" : "PO2",
           "types" : [ "postal_code_prefix", "postal_code" ]
        },
        {
           "long_name" : "Portsmouth",
           "short_name" : "Portsmouth",
           "types" : [ "postal_town" ]
        }
     ],
     "formatted_address" : "131 Stubbington Avenue, Portsmouth PO2, UK",
     "geometry" : {
        "location" : {
           "lat" : 50.8170795,
           "lng" : -1.0709701
        },
        "location_type" : "ROOFTOP",
        "viewport" : {
           "northeast" : {
              "lat" : 50.81842848029149,
              "lng" : -1.069621119708498
           },
           "southwest" : {
              "lat" : 50.8157305197085,
              "lng" : -1.072319080291502
           }
        }
     },
     "types" : [ "street_address" ]
  }
   ],
"status" : "OK"
}

also heres a link to my dev page with my current code in full

In summary, how do I get "Stubbington Avenue" from that mess up there ?

Answer

nebulae picture nebulae · Mar 5, 2014

you don't need to JSON.parse those results, it's already json.

to get "stubbington avenue" out of that valid json, you would use results[0].address_components[1].short_name

if you wanted to build the actual address out of those address components, you can loop through and see the values printed out to the console like this:

for(var i in results[0].address_components){
    console.log(results[0].address_components[i].short_name);
}

instead of logging them out, append them to a string, or append them to an element, whatever you wish to do with them.