пытаясь динамически загружать точки данных в слой тепловой карты Google

Question

Я пытаюсь добавить на карту Google слой тепловой карты, заполненный точками данных из серверной части SQL.До сих пор мне удалось отобразить карту, и я вызываю метод с кодом, который возвращает массивы точек широты и долготы JSON.

Когда я пытаюсь добавить точки в тепловую карту, ничего не отображается, и яне получайте никаких ошибок со стороны сервера или клиента.ниже я вставил фрагмент JSON, который я передаю функции java-скрипта, которая должна заполнять слой тепловой карты, html-разметку и код java-скрипта.

Окончательный результат должен быть тепло-слой карты, отображаемый поверх карты.В настоящее время отображается только карта.

"alert (data);"отображается, но "alert (jsonData);"не отображается

из c # Я использую JSON.NET для сериализации данных.

[{"CoordinatesObject":[{"Latitude":57.149605,"Longitude":-2.096916}]},{"CoordinatesObject":[{"Latitude":57.14871,"Longitude":-2.097806}]},{"CoordinatesObject":[{"Latitude":57.14905,"Longitude":-2.097004}]}]



 <div class="row">
    <div class="col-12 align-content-md-center">
        <div id="floating-panel" class="floating-panel">
            <button onclick="toggleHeatmap()">Toggle Heatmap</button>
            <button onclick="changeGradient()">Change gradient</button>
            <button onclick="changeRadius()">Change radius</button>
            <button onclick="changeOpacity()">Change opacity</button>
        </div>
        <div id="map" class="map">&nbsp;</div>
    </div>
</div>

 var map, heatmap;

    function initMap() {
        var CenterLat = 55.95206;
        var CenterLong = -3.19648;

        var mapCoordinates = {
            center: new google.maps.LatLng(CenterLat, CenterLong),
            zoom: 8,
            mapTypeId: 'roadmap'
        }
        map = new google.maps.Map(document.getElementById('map'), mapCoordinates);

        heatmap = new google.maps.visualization.HeatmapLayer({
            data: getPoints(),
            map: map
        });

    }//end InitMap

function getPoints() {

        var Json =<%=GetJsonData()%>;

        //var jsonData = JSON.parse(Json);

        for (var i = 0; i < Json.length; i++) {
            var LatLongObj = Json.CoordinatesObject[i];
            //ArrLatLong.push("location:" + new google.maps.LatLng(LatLongObj.Latitude, LatLongObj.Longitude));

            var marker = new google.maps.Marker({
                'location': new google.maps.LatLng(LatLongObj.Latitude, LatLongObj.Longitude),
                'map': map,
                'weight': i
            });
        }
    }

обратите внимание, что я впервые играю с Google Map API.

РЕДАКТИРОВАТЬ: мой рабочий раствор

 var map, heatmap;

    function initMap() {
        var CenterLat = 56.816918399;
        var CenterLong = -4.1826492694;
        var ArrMarkers=[];
        var ServerData =<%=GetJsonData()%>;
         var Latitude ;
         var Longitude;

        for (var i = 0; i < ServerData.length; i++) {

            Latitude = ServerData[i].Latitude;
            Longitude = ServerData[i].Longitude;

            var marker = { location: new google.maps.LatLng(Latitude, Longitude) };
            ArrMarkers.push(marker);

        }

        var mapCoordinates = {
            center: new google.maps.LatLng(CenterLat, CenterLong),
            zoom: 7,
            mapTypeId: 'roadmap'
        };
        map = new google.maps.Map(document.getElementById('map'), mapCoordinates);

        heatmap = new google.maps.visualization.HeatmapLayer({
            data: ArrMarkers,
            radius: 15,
            opacity:0.5,
            map: map
        });

    }//end InitMap

Answer 1

Финальная душа

var map, heatmap;

function initMap() {
    var CenterLat = 56.816918399;
    var CenterLong = -4.1826492694;
    var ArrMarkers=[];
    var ServerData =<%=GetJsonData()%>;
     var Latitude ;
     var Longitude;

    for (var i = 0; i < ServerData.length; i++) {

        Latitude = ServerData[i].Latitude;
        Longitude = ServerData[i].Longitude;

        var marker = { location: new google.maps.LatLng(Latitude, Longitude) };
        ArrMarkers.push(marker);

    }

    var mapCoordinates = {
        center: new google.maps.LatLng(CenterLat, CenterLong),
        zoom: 7,
        mapTypeId: 'roadmap'
    };
    map = new google.maps.Map(document.getElementById('map'), mapCoordinates);

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: ArrMarkers,
        radius: 15,
        opacity:0.5,
        map: map
    });

}//end InitMap