We Keep Coding

Script not working when trying to getJSON from URL that I put lat & long data into

As you can see here, my app doesn't work when I try to use the variables "latitude" and "longitude" (those variables should get the user's current latitude and longitude) in the URL that I am getting JSON from.
Below is my code
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude
var longitude = position.coords.longitude
})
}
$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&lon=" + longitude, function(json){
var temp = json.main.temp
var ftemp = (temp * 1.8) + 32
var celsius = true
var condition = json.weather[0].main
var video;
switch (condition)
{
case "Clouds":
video = ""
break;
case "Rain":
video = "https://gcs-vimeo.akamaized.net/exp=1523487613~acl=%2A%2F401800757.mp4%2A~hmac=d66772ad9d6530ff1af68ac1dc01fcf17db42cce48ff72eebf97cc2b34ec0dab/vimeo-prod-skyfire-std-us/01/2146/5/135733055/401800757.mp4"
break;
case "Sunny":
video = ""
break;
}
$("#myVideo").html("<source src='" + video + "' type='video/mp4'>")
$("#condition").html(condition)
$("#number").html(Math.round(temp) + "°C")
$("#button").on("click", function(event){
event.preventDefault()
celsius = !celsius;
if (celsius)
{
$("#number").html(Math.round(temp) + "°C")
$("#button").html("(Switch to °F)")
}
else
{
$("#number").html(Math.round(ftemp) + "°F")
$("#button").html("(Switch to °C)")
}
})
})
But before I added the upper "if portion" and before I tried putting the variables into the URL, the app worked just fine, so the issue is somewhere in these few lines below.
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude
var longitude = position.coords.longitude
})
}
$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + latitude + "&lon=" + longitude, function(json){

Your variables are going out of scope:
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude
var longitude = position.coords.longitude
})
}
You need to declare the variables outside of that inner function:
var latitude, longitude;
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude
longitude = position.coords.longitude
})
}
Oh, and you'll need to wait until you have gotten the coordinates, so you should wrap your getJSON call in a function, and then call it after you have the variables.
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude
longitude = position.coords.longitude
doAjaxRequest();
})

trying to access weather API and display name and weather just the following code is correct

var api="https://fcc-weather-api.glitch.me/api/current?";
function getWeather(lat,lon){
var ustr = api + lat + "&" + lon;
$.ajax({
url: ustr, success:function(result){
$("#place").text(result.name+",");
$("#country").text(result.sys.country);
}
});
}
$( document ).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var lat = "lat=" + position.coords.latitude;
var lon = "lon=" + position.coords.longitude;
getWeather(lat, lon);
});
} else {
$("#place").html("Geolocation is not supported by this browser.");
}
})
unable to get name and country from this JavaScript please help
i even tried with j son function but dint displayed any result

(Phonegap) javascript trigger event when gps location in range

I'm working on trying to trigger an event (to unhide an alert or image) based on gps coordinates falling within a certain range.
I think I need to do something like: If GPS Lat is > x (set based on location I want them to go to) and < y & GPS Long is > z and < a, then show (use js change css to display: block).
Am I down the right path? I'll post what I have as the basics of getting the GPS coordinates to just appear. I'm learning as I go here, so any help is appreciated for the proper structure. Thank you.
document.addEventListener("deviceready", onDeviceReady, false);
var watchID = null;
// device APIs are available
//
function onDeviceReady() {
var options = { timeout: 100000 };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
UPDATE:
I have gotten to the point where I'm not getting errors, now I'm hoping for some help to get a heading based on my current location and the destination. Any help is greatly appreciated. I'm posting my current code below:
document.addEventListener("deviceready", onDeviceReady, false);
var watchID = null;
var gpscoord = null;
var destLat = 37.200401
var destLon = 93.278610
function onDeviceReady() {
var gpsOptions = { timeout: 5000 };
gpscoord = navigator.geolocation.getCurrentPosition(gpsSuccess, gpsError, gpsOptions);
}
//gpsSuccess
//
function gpsSuccess(position) {
var lat = document.getElementById('latitude');
var lon = document.getElementById('longitude');
lat.innerHTML = 'Latitude:' + position.coords.latitude;
lon.innerHTML = 'Longitude:' + position.coords.longitude;
document.getElementById('gotoLat').innerHTML = 'Destination Latitude: ' + destLat;
document.getElementById('gotoLon').innerHTML = 'Destination Longitude: ' + destLon;
}
function gpsError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
<div class="container">
<br/>
<br/>
<p id="latitude">Watching latitude...</p>
<p id="longitude">Watching longitude...</p>
<br/>
<p id="gotoLat">Destination latitude...</p>
<p id="gotoLon">Destination longitude...</p>
</div>

Yeah that looks fine. The watcher will call onSuccess when the GPS has been successfully polled, and returns data.
I would save the Longitude and Latitude in the global scope, and then you can perform what ever kind of logic you want on it.

How to save a variable value outside of a function in javascript

I am newbie to JavaScript, I was trying to make a simple GoogleMaps which is centered in my current position and I am finding problems saving my latitude and longitude to center the map.
Here is my code which i have adopted:
function initialize() {
var latitudeCenter;
var longitudeCenter;
navigator.geolocation.getCurrentPosition(onSuccess, onError);
function onSuccess(position){
console.log(position.coords.latitude, position.coords.longitude);
latitudeCenter = position.coords.latitude;
longitudeCenter = position.coords.longitude;
}
function onError(error){
alert('Error en GPS: ' + error);
}
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(latitudeCenter, longitudeCenter)
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
console.log('latitud: ' + latitudeCenter + ' longitud: ' + longitudeCenter);
}
In the first console log I can read my current position and latitude, so that method works fine, but when I try to save it in centerLatitude and centerLongitude it does not work, it displays undefined.
Thanks for the help

So, the functions onSuccess and onError are asynchronous, so you won't get back an answer straight away. So therefore you put your actual map initialisation code inside that onSuccess
function initialize() {
var latitudeCenter;
var longitudeCenter;
navigator.geolocation.getCurrentPosition(onSuccess, onError);
function onSuccess(position){
console.log(position.coords.latitude, position.coords.longitude);
latitudeCenter = position.coords.latitude;
longitudeCenter = position.coords.longitude;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(latitudeCenter, longitudeCenter)
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
function onError(error){
alert('Error en GPS: ' + error);
}
console.log('latitud: ' + latitudeCenter + ' longitud: ' + longitudeCenter);
}

google map current location preview

hello there i have following code from google geoloction api..
this api is fetching an image of the current location of mine..
what i need to do is display these coordinates in google map(not in an image)
code is as follow:
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 = "http://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);
}
your help will be appreciated !

Here is a Plunker to help you out! Just fill up the needed data on the iframe with yours and it will work. But instead of setting it to the img src you need to append it to the html.