My code is not workingWeather API

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 !

<div class="container">
  <button type="button" onclick=geoFindMe();>Click me</button>
  <div id="imag">
  <div id="output">


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");

  function success(position) {

    var img = new Image();
    img.src = "" + Math.ceil(latitude) + "," + Math.ceil(longitude) + "&zoom=13&size=300x300&sensor=false";


    info.addEventListener("click", myFunction);

    function myFunction() {

      $(document).ready(function() {

        $.getJSON("" + Math.ceil(latitude) + "&lon=" + Math.ceil(longitude) + "&appid=893a8050be2bab7220bcc082928e385d", function(data) {
          var country =;
          var city =;
          var tempe = data.main.temp;
          var weath =[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 ( to another (weatherapi, googleapi, etc)…

1 Like

I’m not sure how would I check if I’m not getting the data of API

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.

1 Like

Well, url is working, my actual coordinates would be something like this:

I got the image working with this URL:

img.src = "" + latitude[0] + "%2C" + longitude[0] + "&zoom=13&size=300x300";

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.

1 Like

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

1 Like

yes, image is working alright, I already tried making the other URL like this “” + 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.

One last thing i noticed is that you have the click listener inside the function that is supposed to be called when the button is clicked.

1 Like

That seems to not be the problem as well eheh Thank you anyway sir !

Glad I could help… I tweaked your original code, please find it here:


1 Like

Wow that’s perfect ! I will try to see what’s wrong! Thank you so much :slight_smile:

I made a systematic approach to see what was the problem and well it was really frustrating, the problem this all time was this :

"info.innerHTML("Well, you are in " + country + " in " + city + ". I feel that the temperature is " + tempe + " and weather is: " + weath);

instead of

"info.innerHTML = "Well, you are in " + country + " in " + city + ". I feel that the temperature is " + tempe + " and weather is: " + weath;"