Can't append my latitude or longitude to html document?

Question

I am using a openweather api to display the weather of the user's city. I begin by using the geolocation function to find the latitude and longitude of the user. That data is then passed in the variable api. The latitude and longitude for some reason will not append to the div id data nor does the api seem to work.

Here is a link to the codepen: http://codepen.io/sibraza/pen/VjYwWK?editors=1111

Here is the JavaScript:

$(document).ready(function(){  
 var lat;
 var long; 

  if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {

    lat = position.coords.latitude; 
    long = position.coords.longitude; 


  var api='http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=(The API Key Was Removed in the question)';

  $.getJSON(api,function(data){
 var city= data.name; 

  console.log(api);
  console.log(city);
  });

  });

}

});

Try not using the javascipt keyword "long" as a variable name. Try "lon" instead. http://www.javascripter.net/faq/reserved.htm — gmfm, Jun 08 '16 at 02:22
Possible duplicate of [JSON data not being returned - JQuery AJAX](http://stackoverflow.com/questions/20805481/json-data-not-being-returned-jquery-ajax) — emrhzc, Jun 08 '16 at 02:34

score 0 · Answer 1 · answered Jun 08 '16 at 02:57

`function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  };

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}`

and HTml

`<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>

`

https://jsfiddle.net/api/mdn/

There is no explanation here. of how this solves OP's problem — charlietfl, Jun 08 '16 at 11:00

Can't append my latitude or longitude to html document?

1 Answers1