Skip to content
  • About Us
  • Contact Us
  • Privacy Policy
  • Disclaimer
  • Corona Virus Stats (Covid-19)
  • Work with us
  • FB
  • LinkedIn
  • Twitter
  • Instagram.com
Tekraze

Tekraze

Dive Into Technology

  • Guides
    • Developer Guide
    • PC Guide
    • Web Guide
    • Android Guide
    • Music
    • Tutorials
  • Feed
    • Tech News
    • Shared Tech
    • Gaming Videos
    • Unboxing videos
  • Forums
    • Android Apps
    • Angular Npm Packages
    • Useful Site Links
    • Tech Queries
    • Windows OS Help
    • Web Guide and Help
    • Android Os And Rooting
    • Jhipster Discussion
    • Git & GitHub forum
    • Open Source Forum
  • Work with us
  • Toggle search form
Google Map JSON Parser 4

Google Map JSON Parser

Posted on August 25, 2018December 18, 2020 By Gaurav Raheja No Comments on Google Map JSON Parser

There’s a day in every Web developer Life, when they need to deal with Google APIs. Out of which is a MAP API. Putting a map on the Web APP is as easy as playing Snake & the Ladder. Just Few Lines of code and you are done with the Map Setup on any page.

But handling  and parsing the JSON data sent by Google API is like just you are going to win the game of snake and ladder and the snake at 99 position bites you and you are back to the lowest point. I will tell you the way how you can fight with that last snake and win the game.

Let’s first Just Create latitude, longitude and api key variable that is sent to the google API Key

let lat = null; //replace the latitude value here
let lng = null; //replace the longitude value here
let YOUR_KEY = null; //replace the API KEY here
let postal_code, city, state, street, area = "";// some other variables<br>

You can place the Latitude and Longitude value obtained from either the Navigator object or any other means  to the lat, lng variable declared above. YOUR_KEY variable will have api key obtained from google geocode API.

$.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ", " + lng + '&key=YOUR_KEY', function (data) {
    if (data['status'] === "OK") {
         // MAIN LOGIC GOES HERE
    }
})

Then we need to send the GET Request to the Google GeoCode API at the address 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ", " + lng + '&key=YOUR_KEY' after formatting and placing right variable the actual url looks like 'https://maps.googleapis.com/maps/api/geocode/json?latlng=30.7941, 76.9147&key=APIKeyValue' this will get you some JSON data to use it and further process it we set a callback function that accepts data parameter which will contain lot’s of information as shown  below

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "Zirakpur-Panchkula-Kalka Highway",
               "short_name" : "NH105",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Pinjore",
               "short_name" : "Pinjore",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Panchkula",
               "short_name" : "Panchkula",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Haryana",
               "short_name" : "HR",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "India",
               "short_name" : "IN",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "134101",
               "short_name" : "134101",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "Zirakpur-Panchkula-Kalka Hwy, Pinjore, Haryana 134101, India",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 30.7938043,
                  "lng" : 76.915638
               },
               "southwest" : {
                  "lat" : 30.7932729,
                  "lng" : 76.915334
               }
            },
            "location" : {
               "lat" : 30.7935293,
               "lng" : 76.91550789999999
            },
            "location_type" : "GEOMETRIC_CENTER",
            "viewport" : {
               "northeast" : {
                  "lat" : 30.7948875802915,
                  "lng" : 76.91683498029151
               },
               "southwest" : {
                  "lat" : 30.7921896197085,
                  "lng" : 76.91413701970849
               }
            }
         },
         "place_id" : "ChIJWbBSUuKNDzkRBz09XtZIRqc",
         "types" : [ "route" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "Pinjore",
               "short_name" : "Pinjore",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "Panchkula",
               "short_name" : "Panchkula",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Haryana",
               "short_name" : "HR",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "India",
               "short_name" : "IN",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Pinjore, Haryana, India",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 30.81374,
                  "lng" : 76.9314011
               },
               "southwest" : {
                  "lat" : 30.7755216,
                  "lng" : 76.90201859999999
               }
            },
            "location" : {
               "lat" : 30.797013,
               "lng" : 76.9177947
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 30.81374,
                  "lng" : 76.9314011
               },
               "southwest" : {
                  "lat" : 30.7755216,
                  "lng" : 76.90201859999999
               }
            }
         },
         "place_id" : "ChIJUX8Lid-NDzkR-ZEmEZQoVeE",
         "types" : [ "locality", "political" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "134101",
               "short_name" : "134101",
               "types" : [ "postal_code" ]
            },
            {
               "long_name" : "Panchkula",
               "short_name" : "Panchkula",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Haryana",
               "short_name" : "HR",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "India",
               "short_name" : "IN",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Haryana 134101, India",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 30.8029068,
                  "lng" : 76.9154441
               },
               "southwest" : {
                  "lat" : 30.7621556,
                  "lng" : 76.8841997
               }
            },
            "location" : {
               "lat" : 30.7943073,
               "lng" : 76.9009191
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 30.8029068,
                  "lng" : 76.9154441
               },
               "southwest" : {
                  "lat" : 30.7621556,
                  "lng" : 76.8841997
               }
            }
         },
         "place_id" : "ChIJgQb-5vONDzkRTa1-UYsisjM",
         "types" : [ "postal_code" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "Panchkula",
               "short_name" : "Panchkula",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Haryana",
               "short_name" : "HR",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "India",
               "short_name" : "IN",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Panchkula, Haryana, India",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 30.92884,
                  "lng" : 77.1778199
               },
               "southwest" : {
                  "lat" : 30.46009,
                  "lng" : 76.77467
               }
            },
            "location" : {
               "lat" : 30.657625,
               "lng" : 77.0564464
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 30.92884,
                  "lng" : 77.1778199
               },
               "southwest" : {
                  "lat" : 30.46009,
                  "lng" : 76.77467
               }
            }
         },
         "place_id" : "ChIJD2a7d07vDzkRJbPT291BZ7w",
         "types" : [ "administrative_area_level_2", "political" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "Haryana",
               "short_name" : "HR",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "India",
               "short_name" : "IN",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Haryana, India",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 30.9128649,
                  "lng" : 77.59544799999999
               },
               "southwest" : {
                  "lat" : 27.6529931,
                  "lng" : 74.457616
               }
            },
            "location" : {
               "lat" : 29.0587757,
               "lng" : 76.085601
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 30.9128649,
                  "lng" : 77.59544799999999
               },
               "southwest" : {
                  "lat" : 27.6529931,
                  "lng" : 74.457616
               }
            }
         },
         "place_id" : "ChIJC0BwhguwDTkRQ8GmqrSqLnM",
         "types" : [ "administrative_area_level_1", "political" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "India",
               "short_name" : "IN",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "India",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 35.513327,
                  "lng" : 97.39535869999999
               },
               "southwest" : {
                  "lat" : 6.4626999,
                  "lng" : 68.1097
               }
            },
            "location" : {
               "lat" : 20.593684,
               "lng" : 78.96288
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 35.513327,
                  "lng" : 97.39535869999999
               },
               "southwest" : {
                  "lat" : 6.4626999,
                  "lng" : 68.1097
               }
            }
         },
         "place_id" : "ChIJkbeSa_BfYzARphNChaFPjNc",
         "types" : [ "country", "political" ]
      }
   ],
   "status" : "OK"
}

Which is just similar to the snake on the 99 position in snake and Ladder which you need to fight, You need to extract the only required data like city, state, country etc. from there.

So let’s just dive into main working part of the code, The code shown below does the main working after the Json is Obtained from the server

//Main Code that Goes in the if Clause
let result = data['results'][0].address_components;
let street, city, state, postal_code, area = "";
for (let i = 0; i < result.length; i++) {
    let type_of_param = result[i].types[0];
    let long_name = result[i].long_name;
    if (type_of_param === "postal_code") {
        postal_code = long_name;
    } else if (type_of_param === "administrative_area_level_1") {
        state = long_name;
    } else if (type_of_param === "administrative_area_level_2") {
        city = long_name;
    } else if (type_of_param === "route") {
        street = long_name;
    } else if (type_of_param === "neighborhood") {
        if (area === "") {
            area = long_name;
        } else {
            area += ", " + long_name;
        }
    } else if (result[i].types[1] === "sublocality") {
        if (area === "") {
            area = long_name;
        } else {
            area += ", " + long_name
        }
    }
}
setValue(street, area, city, postal_code, state);//Utility Function Call

Initially i stored the address components in the result variable, and iterate over the results till its length. While iterating I store two things for each object in result one is type_of_parameter and one being long_name, and in the loop checking for city, street, area, pin Code, state etc.

Then at last i Call a Utility Function that display the value to desired location. It’s implementation can be based on your usages but i am getting these value in  Input Fields, whose implementation is given below:

function setValue(street, area, city, postal_code, state) {
    //all the xx_input are form input
    let city_input = document.getElementById("city");
    let area_input = document.getElementById("area");
    let pin_input = document.getElementById("pin");
    let state_input = document.getElementById("state");
    let street_input = document.getElementById("street");
    if (typeof city !== "undefined") {
        city_input.value = city;
        console.log('')
    }
    if (typeof area !== "undefined") {
        area_input.value = area;
    }
    if (typeof postal_code !== "undefined") {
        pin_input.value = postal_code;
    }
    if (typeof state !== "undefined") {
        state_input.value = state;
    }
    if (typeof street !== "undefined") {
        street_input.value = street;
    }
    console.log(street, area, city, postal_code, state);
}

If you are having any issues with the code comment out below

To get the Code in one shot visit: https://gist.github.com/this-is-r-gaurav/c8be3c67874faad12e9133cfc4d24982

And If You want to test Live this Feature You may visit https://listing-app-tekraze.herokuapp.com/free-listing After registering a Shop You will be redirected to Fill Address app information, there you will find map below and if you will click on that map you will find that all the inputs here got filled automatically, that’s all done with this JSON Parser. Here are the screenshots Below:

Google Map JSON Parser 5Google Map JSON Parser 6 Google Map JSON Parser 7

If any one is interesting of Buying this app(build with Python, Flask, ElasticSearch, Bootstrap 4.1, MongoDb,Having Basic Admin Dashboard) can Contact at tekraze786gmail.com

Content Protection by DMCA.com
Developer Guide, Web Guide Tags:Geo API, Geo Json, javascript, jquery, Parser

Post navigation

Previous Post: Unsexy Startups disrupting Trillion Dollar Industries
Next Post: How to Encrypt and Decrypt Files in Linux

Related Posts

  • 5 best apps for programming students 11
    5 best apps for programming students Guest posts
  • Tekraze Plural Sight courses
    Learn with Plural – Learn with Google Tutorials
  • 10 BUSINESS-CRITICAL DIGITAL MARKETING TRENDS FOR 2019
    10 BUSINESS-CRITICAL DIGITAL MARKETING TRENDS FOR 2019 Guest posts
  • General requirements to build and run KIKAPP 12
    General requirements to build and run KIKAPP Android Guide
  • MarkUp editor
    MarkUp Web Editor – Update Developer Guide
  • Linux Terminology basics you need to know
    Git Terminologies Post 3 Developer Guide

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Advertisements

Subscribe to updates

Enter your email below to subscribe





Posts by Categories

Advertisements
  • Hadoop Introduction for Beginners Guest posts
  • Install Ubuntu in Windows 10
    How to Install Ubuntu in Windows 10 Tutorials
  • Simple Tips to Troubleshoot Computer Issues
    Learn 7 Simple Tips to Troubleshoot Computer Issues PC Guide
  • Api Tekraze
    API – Application Programming Interface Developer Guide
  • choose a right blog topic tekraze
    Choose a right blog topic to drive a ton of traffic to your blog Guest posts
  • Learn Git like You are five 13
    Learn Git like You are five Developer Guide
  • As the student passed matriculation examination, lots of institution advertisements and call to the students, to join the institution to crack JEE main exams. As the sheep moves in a herd and we being dumb, as a kid with no proper guidance saw huge dreams that if i will join the institution i will be in best university in the India.
    Computer Science Engineering – Buzz Word or Bamboozle Developer Guide
  • An Introduction to Application Programming Interfaces (APIs) and Common Apps/Services That Use Them
    An Introduction to Application Programming Interfaces (APIs) and Common Apps Services That Use Them Developer Guide

Affliate Links

Sell with Payhip

Earn with Magenet

Sell and Buy with Adsy

GainRock affiliate Program

Automatic Backlinks

Advertise with Anonymous Ads

accessily tekraze verificationIndian Blog Directory

Copyright © 2023 Tekraze.

Powered by PressBook News WordPress theme