Я решил поиграть с googlemaps и API ISS, чтобы создать базовый трекер c. Я планирую добавить кучу вещей к этому, но пока это остается простым.
Проблема, с которой я столкнулся, заключается в том, что я могу установить фиктивные значения в asp: метки для широты и долготы, а затем заполнить ими строку, которую я могу использовать с картами Google.
var ISS = { lat: parseFloat(document.getElementById('lblLat').innerText), lng: parseFloat(document.getElementById('lblLong').innerText) };
Это работает, когда я тогда пытаюсь использовать значения, полученные из обратного вызова json, хотя я могу видеть их, когда использую console.log (), они не работают.
ISS = { lat: data['iss_position']['latitude'], lng: data['iss_position']['longitude'] };
I попытался вместо чтения напрямую добавить обратно к asp: Label, а затем прочитать, но это тоже не работает.
Что я делаю не так? Я пытался не добавлять никакой сложности к этому, пока я играю с googlemaps api, но это не работает, сбивает меня с толку, так как я не вижу, что отличается от фиктивных значений по сравнению с тем, что я получаю из API. 
Ниже приведен весь мой код для этой страницы.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ISS.aspx.cs" Inherits="WebApps.IIS" %>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head runat="server">
<title>ISS Tracker</title>
<style>
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
#pageTitle{
margin: auto;
padding: 10px;
}
</style>
</head>
<body>
<div id="pageTitle">
<h3>ISS Tracker</h3>
<h4>International Space Station</h4>
</div>
<form runat="server">
<label>Latitude: </label><asp:Label runat="server" ID="lblLat"/><br />
<label>Longitude: </label><asp:Label runat="server" ID="lblLong"/><br />
<label>Time: </label><asp:Label runat="server" ID="lblTime" Text="13/02/2020 15:45:00" /><br />
<asp:Button runat="server" ID="btnRefresh" Text="Refresh" onClick="btnRefresh_Click" style="height: 26px" />
<div id="map"></div>
</form>
<script>
//globals
var map;
var ISS;// = { lat: parseFloat(document.getElementById('lblLat').innerText), lng: parseFloat(document.getElementById('lblLong').innerText) };
var image = 'http://icons.iconarchive.com/icons/goodstuff-no-nonsense/free-space/256/international-space-station-icon.png'
// Initialize and add the map
function initMap() {
// The location of ISS
$.getJSON('http://api.open-notify.org/iss-now.json?callback=?', function (data) {
ISS = { lat: data['iss_position']['latitude'], lng: data['iss_position']['longitude'] };
console.log("latitude: " + data['iss_position']['latitude'] + " & longitude: " + data['iss_position']['longitude']);
document.getElementById('lblLat').innerText = data['iss_position']['latitude'];
document.getElementById('lblLong').innerText = data['iss_position']['longitude'];
});
// The map, centered at ISS
map = new google.maps.Map(
document.getElementById('map'), { zoom: 10, center: ISS });
// The marker, positioned at ISS
var marker = new google.maps.Marker({
position: ISS,
map: map,
icon: {
url: image,
scaledSize: new google.maps.Size(128, 128),
size: new google.maps.Size(128, 128)
}
});
marker.position = ISS;
}
//Will use later when i want to update
function moveISS() {
$.getJSON('http://api.open-notify.org/iss-now.json?callback=?', function (data) {
var lat = data['iss_position']['latitude'];
var lon = data['iss_position']['longitude'];
ISS = { lat: lat, lng: lon };
document.getElementById('lblLat').innerText = lat;
document.getElementById('lblLong').innerText = lon;
});
setTimeout(moveISS, 5000);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=*****api key *****&callback=initMap">
</script>
</body>
</html>