How to get geocode latitude and longitude from json google map api in variables by javascript?

Question

JSON GEO LOCATION https://maps.googleapis.com/maps/api/geocode/json?address=KOLKATA&key=API_KEY

{
       "results" : [
          {
             "address_components" : [
                {
                   "long_name" : "Kolkata",
                   "short_name" : "Kolkata",
                   "types" : [ "locality", "political" ]
                },
                {
                   "long_name" : "Kolkata",
                   "short_name" : "Kolkata",
                   "types" : [ "administrative_area_level_2", "political" ]
                },
                {
                   "long_name" : "West Bengal",
                   "short_name" : "WB",
                   "types" : [ "administrative_area_level_1", "political" ]
                },
                {
                   "long_name" : "India",
                   "short_name" : "IN",
                   "types" : [ "country", "political" ]
                }
             ],
             "formatted_address" : "Kolkata, West Bengal, India",
             "geometry" : {
                "bounds" : {
                   "northeast" : {
                      "lat" : 23.0078201,
                      "lng" : 88.5428696
                   },
                   "southwest" : {
                      "lat" : 22.3436288,
                      "lng" : 88.19430439999999
                   }
                },
                "location" : {
                   "lat" : 22.572646,
                   "lng" : 88.36389500000001
                },
                "location_type" : "APPROXIMATE",
                "viewport" : {
                   "northeast" : {
                      "lat" : 23.0078201,
                      "lng" : 88.5428696
                   },
                   "southwest" : {
                      "lat" : 22.3436288,
                      "lng" : 88.19430439999999
                   }
                }
             },
             "place_id" : "ChIJZ_YISduC-DkRvCxsj-Yw40M",
             "types" : [ "locality", "political" ]
          }
       ],
       "status" : "OK"
    }

JS

$(function() {
    $("#home_city_select").change(function() {
        //alert( $('option:selected', this).text() );
        var city = document.getElementById("home_city_select").value;
        var ltd;
        var lng;

        var jsonLtdLng="https://maps.googleapis.com/maps/api/geocode/json?address="+city+"&key=API_KEY";
        //alert(JSON.stringify(jsonLtdLng));
        //alert($.getJSON(jsonLtdLng));
        //alert($.getJSON(jsonLtdLng.lat));
        //alert($.getJSON(jsonLtdLng.results.geometry.location.lat));
        //alert($.getJSON(jsonLtdLng.results[0].geometry.location.lat));
        //alert($.getJSON(jsonLtdLng.results[0].geometry.location.lat()));
        alert(jsonLtdLng.results[0].geometry.location.lat());
    });
});

Testing in IBM Worklight.

But I cannot get the latitude and longitude

alert(JSON.stringify(jsonLtdLng));//returns full address

alert($.getJSON(jsonLtdLng));//returns object Object

alert($.getJSON(jsonLtdLng.lat));//returns nothing

alert($.getJSON(jsonLtdLng.results.geometry.location.lat));//returns nothing

alert($.getJSON(jsonLtdLng.results[0].geometry.location.lat));//returns nothing

alert($.getJSON(jsonLtdLng.results[0].geometry.location.lat()));//returns nothing

alert(jsonLtdLng.results[0].geometry.location.lat());//returns nothing

Answer 1

Your call to $.getJSON was not totally correct

Try this :

$.getJSON(jsonLtdLng, function (data) {
  console.log(data.results[0].geometry.location.lat);
});

Answer 2

I think you can use console.log() , alert() or document.write() as long as the information is deserialized, I am using JSON.parse() for deserializing, eval() is what people used before. Deserializing means to recover the data encoded in json so Javascript can use it as an object. In fact, if you use write.document(someJson) you will see [object object] meaning you have all your data there ready to be used, but you need to JSON.parse() it first. JSON.stringnify() is the opposite of what you want to do, because that function is for serialize the data and then transmit it, then the receptor needs to use JSON.parse() to deserialized it and use it in Javascript. I like to use write.document() in order to see the information, but console log allows you to see what is inside of the object easier. Here, some code example:

// apiData would be the variable with the API information
var externalData = JSON.parse(apiData);

// will output [object object]     
document.write(externalData);

// will output  “     “
document.write('      ');

// will output the latitude
document.write(externalData.results[0].geometry.location.lat);

// will output in the console, you need to type externalData in the console log 
console.log(externalData);

I hope this helps.