Hello everyone. I was wondering if you could explain to me how I can convert the longitude and latitude to a country and city. This is the code I have so far, but I am stuck because I’m trying to use Google’s geocoding API to take the coordinates of the DarkSky API (where I got the coordinates), but I’m unable to put them together to have it convert. I would greatly appreciate any help. Here’s my codepen.
You need to use google’s geocode API to get a JSON object that has the locality information.
An api call of:
https://maps.googleapis.com/maps/api/geocode/json?&latlng=49.162175,-123.944664
Returns this object. You can see the nearest City and other address info in the results array below. I used this to set the City:
{
"results" : [
{
"address_components" : [
{
"long_name" : "772",
"short_name" : "772",
"types" : [ "street_number" ]
},
{
"long_name" : "Franklyn Street",
"short_name" : "Franklyn St",
"types" : [ "route" ]
},
{
"long_name" : "Nanaimo",
"short_name" : "Nanaimo",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Nanaimo",
"short_name" : "Nanaimo",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "British Columbia",
"short_name" : "BC",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Canada",
"short_name" : "CA",
"types" : [ "country", "political" ]
},
{
"long_name" : "V9R 2Y3",
"short_name" : "V9R 2Y3",
"types" : [ "postal_code" ]
}
],
"formatted_address" : "772 Franklyn St, Nanaimo, BC V9R 2Y3, Canada",
"geometry" : {
"location" : {
"lat" : 49.16224,
"lng" : -123.94459
},
"location_type" : "ROOFTOP",
"viewport" : {
"northeast" : {
"lat" : 49.1635889802915,
"lng" : -123.9432410197085
},
"southwest" : {
"lat" : 49.1608910197085,
"lng" : -123.9459389802915
}
}
},
"place_id" : "ChIJeaWPp-SjiFQRvEoYbZdU6mY",
"types" : [ "street_address" ]
},
{
"address_components" : [
{
"long_name" : "Nanaimo",
"short_name" : "Nanaimo",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Nanaimo",
"short_name" : "Nanaimo",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "British Columbia",
"short_name" : "BC",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Canada",
"short_name" : "CA",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Nanaimo, BC, Canada",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 49.2586299,
"lng" : -123.809291
},
"southwest" : {
"lat" : 49.09737399999999,
"lng" : -124.0647329
}
},
"location" : {
"lat" : 49.1658836,
"lng" : -123.9400647
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 49.2491904,
"lng" : -123.8093082
},
"southwest" : {
"lat" : 49.09737399999999,
"lng" : -124.0647329
}
}
},
"place_id" : "ChIJWxysIF6hiFQR0A97KhU1AQU",
"types" : [ "locality", "political" ]
},
{
"address_components" : [
{
"long_name" : "V9R 2Y3",
"short_name" : "V9R 2Y3",
"types" : [ "postal_code" ]
},
{
"long_name" : "Nanaimo",
"short_name" : "Nanaimo",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Nanaimo",
"short_name" : "Nanaimo",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "British Columbia",
"short_name" : "BC",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Canada",
"short_name" : "CA",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Nanaimo, BC V9R 2Y3, Canada",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 49.162495,
"lng" : -123.943931
},
"southwest" : {
"lat" : 49.161763,
"lng" : -123.945231
}
},
"location" : {
"lat" : 49.16219299999999,
"lng" : -123.9446217
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 49.1634779802915,
"lng" : -123.9432320197085
},
"southwest" : {
"lat" : 49.1607800197085,
"lng" : -123.9459299802915
}
}
},
"place_id" : "ChIJpXCureSjiFQR1tPaqs95O2w",
"types" : [ "postal_code" ]
},
{
"address_components" : [
{
"long_name" : "V9R",
"short_name" : "V9R",
"types" : [ "postal_code", "postal_code_prefix" ]
},
{
"long_name" : "Nanaimo",
"short_name" : "Nanaimo",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Nanaimo",
"short_name" : "Nanaimo",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "British Columbia",
"short_name" : "BC",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Canada",
"short_name" : "CA",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Nanaimo, BC V9R, Canada",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 49.211937,
"lng" : -123.9078341
},
"southwest" : {
"lat" : 49.114589,
"lng" : -124.1649329
}
},
"location" : {
"lat" : 49.165722,
"lng" : -124.0001699
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 49.211937,
"lng" : -123.9078341
},
"southwest" : {
"lat" : 49.114589,
"lng" : -124.1649329
}
}
},
"place_id" : "ChIJuXBNzwKjiFQREhByBCo3zt0",
"types" : [ "postal_code", "postal_code_prefix" ]
},
{
"address_components" : [
{
"long_name" : "Nanaimo",
"short_name" : "Nanaimo",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "British Columbia",
"short_name" : "BC",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Canada",
"short_name" : "CA",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Nanaimo, BC, Canada",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 49.471035,
"lng" : -123.44887
},
"southwest" : {
"lat" : 48.9813199,
"lng" : -124.968087
}
},
"location" : {
"lat" : 49.165895,
"lng" : -123.9400717
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 49.4677835,
"lng" : -123.6729311
},
"southwest" : {
"lat" : 48.9813199,
"lng" : -124.968087
}
}
},
"place_id" : "ChIJ4QybURv7iFQRUYSjcwL3PB0",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"address_components" : [
{
"long_name" : "British Columbia",
"short_name" : "BC",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Canada",
"short_name" : "CA",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "British Columbia, Canada",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 60.0001489,
"lng" : -114.054221
},
"southwest" : {
"lat" : 48.224556,
"lng" : -139.0570702
}
},
"location" : {
"lat" : 53.7266683,
"lng" : -127.6476206
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 60.00303169999999,
"lng" : -114.054221
},
"southwest" : {
"lat" : 48.3095424,
"lng" : -139.0538332
}
}
},
"place_id" : "ChIJr2prqsdmelMR-fHnN-lBG4g",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"address_components" : [
{
"long_name" : "Canada",
"short_name" : "CA",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Canada",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 83.63809999999999,
"lng" : -50.9766
},
"southwest" : {
"lat" : 41.6765559,
"lng" : -141.00187
}
},
"location" : {
"lat" : 56.130366,
"lng" : -106.346771
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 70,
"lng" : -50
},
"southwest" : {
"lat" : 42,
"lng" : -142
}
}
},
"place_id" : "ChIJ2WrMN9MDDUsRpY9Doiq3aJk",
"types" : [ "country", "political" ]
}
],
"status" : "OK"
}Btw, if I understand correctly, you have been addressing to in-function variables as to global variables (i.e. "location.innerHTML = “Latitude:” + latitude+“°”+ “Longitude: " + longitude+‘°’;”).
When you address to local var, you should use .this (i.e. "location.innerHTML = “Latitude:” + this.latitude+“°”+ “Longitude: " + this.longitude+‘°’;”)
You have a few issues , the first one is syntactic, in your main URL link, the variable longtitude does not match your initial declaration for that variable
var theUrl = url +apiKey + "/"+ latitude+","+ longtitude +"?callback=?";
Secondly , you declare a function getWeather(latitude, longitude), but you never call it from within your main weather function so it never gets executed, you need to call this function, to clean up your code, I would pull that function out of your .$.getJSON() function but still call it from within it, either before you receive the temp or after , something like this
$.getJSON(theUrl, function(data){
$("#temp").html(data.currently.temperature);
$("#minutely").html(data.minutely.summary)
getWeather(latitude, longitude)
});
then, your function getWeather(latitude, longitude) (which is misnamed because you are really getting the location) could be pulled out to below or above your .$.getJSON() function.
Thirdly, this still will not get you the location because the ajax datatype qualifier for google geocode is not jsonp but regular json, once you change that, you will get your results object, which is massive and you will have to parse thru it to get the location information you desire, note that results comes back as a 10 component array each with more arrays within them , so your code results.adress_components.long_name is going to throw an error , it should be more something along the lines of results.results[0].address_components[0].long_name, hopefully I haven’t given away too much for you to solve the problem, best of luck…
If it’s for the weather app you can pass both parameters into your ajax call and get that info back in the data.name .