Is it possible to extract JSON data from a reverse geocoding request to Google

Question

Is it possible to extract JSON data from a reverse geocoding request to Google

Looking to extract specific information from a reverse geocode response 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);
                    }
                }

The formatted address is displayed in the popup as expected, but I'm interested in retrieving other details like the street name or route. Despite attempts with JSON.parse(json);, an error keeps popping up in the console:

SyntaxError: JSON.parse: unexpected character

In a PHP environment, I would utilize several for each loops. Can a similar approach be taken in JavaScript?

Here's a snippet of sample data:

{
   "results" : [
  {
     "address_components" : [
        {
           "long_name" : "131",
           "short_name" : "131",
           "types" : [ "street_number" ]
        },
        {
           "long_name" : "Stubbington Avenue",
           "short_name" : "Stubbington Ave",
           "types" : [ "route" ]
        },
        ...
     ],
     "formatted_address" : "131 Stubbington Avenue, Portsmouth PO2, UK",
     ...
  }
   ],
"status" : "OK"
}

Addtionally, here's a link to my developer page showcasing the full code.

To simplify, how can I isolate "Stubbington Avenue" from the provided dataset?

javascript json parsing google-maps-api-3 geocode

Answer 1

Answer №1

There is no need to parse those results using JSON.parse; it is already in JSON format.

To extract "stubbington avenue" from the valid json, you can access it by using

results[0].address_components[1].short_name

If you want to construct the complete address using those address components, you can iterate through them and display the values in the console like this:

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

Instead of just logging them out, you can append them to a string or add them to an element, depending on what you wish to do with them.

Answer 2

There is no need to parse those results using JSON.parse; it is already in JSON format.

To extract "stubbington avenue" from the valid json, you can access it by using

results[0].address_components[1].short_name

If you want to construct the complete address using those address components, you can iterate through them and display the values in the console like this:

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

Instead of just logging them out, you can append them to a string or add them to an element, depending on what you wish to do with them.

Answer 3

Answer №2

In my experience with Meteor, I found that it worked a little differently for Meteor.js compared to other platforms.

Here is the code that successfully ran on both the Client Side and Server Side:

      // Client Side

      var zipcode = $('[name=zipcode]').val();

      Meteor.call('getLocationbyZipGoogleAPI', zipcode, function(error, result){
          if(error){
              console.log('error',error.reason);
          } else {
            var apidata = JSON.parse(result.content);
            var longname = apidata.results[0].address_components[3].long_name;
            var longaddress = apidata.results[0].formatted_address;
            var finaladdress = longaddress+', '+longname;
          }
      });

      // Server Method to Call API

      'getLocationbyZipGoogleAPI': function(zip_code){
          // perform validation checks
          var apiurl = 'http://maps.googleapis.com/maps/api/geocode/json?address='+zip_code+'&sensor=true';
          var result = HTTP.get( apiurl );
          return result;
      }

Answer 4

In my experience with Meteor, I found that it worked a little differently for Meteor.js compared to other platforms.

Here is the code that successfully ran on both the Client Side and Server Side:

      // Client Side

      var zipcode = $('[name=zipcode]').val();

      Meteor.call('getLocationbyZipGoogleAPI', zipcode, function(error, result){
          if(error){
              console.log('error',error.reason);
          } else {
            var apidata = JSON.parse(result.content);
            var longname = apidata.results[0].address_components[3].long_name;
            var longaddress = apidata.results[0].formatted_address;
            var finaladdress = longaddress+', '+longname;
          }
      });

      // Server Method to Call API

      'getLocationbyZipGoogleAPI': function(zip_code){
          // perform validation checks
          var apiurl = 'http://maps.googleapis.com/maps/api/geocode/json?address='+zip_code+'&sensor=true';
          var result = HTTP.get( apiurl );
          return result;
      }

Is it possible to extract JSON data from a reverse geocoding request to Google

Answer №1

Answer №2

Similar questions

How can I simulate the response of a VueX action using Vue-test-utils?

Retrieve the child nodes from the array and organize them into a

Locate Checkbox by its Attribute Name and Value

The Onchange event failed to display or conceal the Div

Sending blank data using ExpressJS ajax feature

Is the displayed Cyrillic string in the incorrect character set?

The CSS navigation bar is not properly aligned in the center

Splitting Array into various objects using JavaScript techniques

Managing JSON data with tab fragments on android devices

Deliver files statically from Node.js while handling POST data

It seems that React JS with Redux may not be triggering a re-render

Unable to locate index.html file in Docker container while dockerizing React application

Guide to refreshing extensive dataset using MySQL migration scripts

Is there a way to retrieve values from TextFields and Select elements by simply clicking on a button?

Come hang out in the user voice channel by reacting with your favorite emojis!

Error: react-testing-library throwing validateDOMNesting warning

What is the best way to implement a custom toast delay in a React application using setTimeout

Attempting to retrieve XML/JSON

Innovative application transforms rigid input with dynamic hyphens

Formik Fields with unique key properties