I think one of my problems resides in storing data on my variables, could someone help me, I do not know what I’m doing wrong here. Thank you !
<body>
<div class="container">
<button type="button" onclick=geoFindMe();>Click me</button>
<div id="imag">
</div>
<div id="output">
hello
</div>
</div>
</body>
var latitude = [];
var longitude = [];
var info = document.getElementById("output");
function geoFindMe() {
var imag = document.getElementById("imag");
if (!navigator.geolocation) {
alert("Geolocation is not supported by your browser");
return;
}
function success(position) {
latitude.push(position.coords.latitude);
longitude.push(position.coords.longitude);
var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + Math.ceil(latitude) + "," + Math.ceil(longitude) + "&zoom=13&size=300x300&sensor=false";
imag.appendChild(img);
info.addEventListener("click", myFunction);
function myFunction() {
$(document).ready(function() {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + Math.ceil(latitude) + "&lon=" + Math.ceil(longitude) + "&appid=893a8050be2bab7220bcc082928e385d", function(data) {
var country = data.sys.country;
var city = data.name;
var tempe = data.main.temp;
var weath = data.weather[0].main;
return info.innerHTML("Well, you are in " + country + " in " + city + ". I feel that the temperature is " + tempe + " and weather is: " + weath);
});
});
}
}
function error() {
console.log("Unable to retrieve your location");
}
navigator.geolocation.getCurrentPosition(success, error);
}
Are you able to get JSON data to dispay on the page when making API calls? Browsers block what’s called Cross Origin Scripting - making API calls from one domain (codepen.io) to another (weatherapi, googleapi, etc)…
First thing i noticed is you’re using a comma in the google maps api url, which is a no-no, you have to “URL Encode” it, I did that, but it still doesn’t work. I’ll look into the google maps API, and see what url they’re looking for.
In the meantime, try putting your url’s in your browser, and see if you get JSON back.
Now just try to make the json data appear in InnerHTML in the jQuery code. See if you can get that far, if you can, then it’s not a XSS issue, if you can’t, then you need to use JSONP.
Also, I noticed that latitude and longitude are arrays, you need to reference them by index, in this case, it’s latitude[0], longitude[0] since there should only be one set of coordinates per request
yes, image is working alright, I already tried making the other URL like this “http://api.openweathermap.org/data/2.5/weather?lat=” + latitude[0] + “&lon=” + longitude[0] + “&appid=893a8050be2bab7220bcc082928e385d” but it’s not working. I Thought the “,” would be a problem but I already tried Math.ceil and it still not works.
