Alright, so I’ve been trying to work on this weather site and from reading on the forums there seems to be a bunch of problems with the API’s and getting location data from the browser.
SO, my idea is to actually ask for the location, so in theory, this website would load the weather for anywhere. I’m using a google maps API to get the coordinates, and then I am going to use those coordinates for the dark sky API.
Right now my problem is, for some reason, I cannot get the temperature displayed to update? I am trying to call the function to a variable “coordinates” and put the coordinates variable into the html. Right now I can see in the console that the function does log everything, including the “location” so I am wondering why it does not return and insert into the html?
Currently, I am expecting the app to simply update the text when I push the button and show the location instead. I would later use a form to update the “address” var and then pass the location that’s returned by the getCoordinate function into the query for the dark sky weather api…
The variables you use inside getJSON callback are not accessible from outside this function.
So your variable in click handler is undefined.
You can put your html update inside the callback function and this would display your location.
$(document).ready(function() {
var address = "95746";
function getCoordinates(search) {
var geoRequest = "https://maps.googleapis.com/maps/api/geocode/json?address=" + search;
$.getJSON(geoRequest, data => {
var lat = data.results[0].geometry.location.lat;
var lng = data.results[0].geometry.location.lng;
var city = data.results[0].address_components[1].short_name;
console.log(city + " " + lat, " ", lng);
var mylocation = lat + "," + lng;
console.log("location: ", mylocation);
$("#temp").html(mylocation);
});
}
$("#temp-button").on("click", function() {
getCoordinates(address);
});
});
Awesome. I did the same thing. In case you’re stuck, you can take a peak at my source
It’s a “windowed” demo, so just move the weather app in front by dragging the other windows out of the way.
So, I was assuming that because in my code I returned the location at the end of the function, if I called that function it would return that, even though it was outside the function?
So now I’m wondering, am I completely misunderstanding what a return does? I thought that because I created this “return” of the variable “location” that I made in the function, if I ran that function and set it to the coordinates variable (which is outside the function) that it would essentially take on the value of the location variable inside the function and be able to be used somewhere else?
Your return call was from inside the anonymous callback function of getJSON. You’re not passing that value to getCoordinates(). So later on, when you try to get the return value of getCoordinates, there isn’t really anything there… that’s why it’s undefined.
