Second $.ajax call gets skipped over

Question

I am working with the google maps javascript api and am attempting to update a heat map when the user clicks on a div. The lat long data the is passed into the heatmap come from local json files. At the moment I can get my web page to load with the map and the heatmap overlay showing up properly. The problem is when I click on a div and expect the heatmap data to get updated, the heatmap just disappears. Through my debugging I've discovered that the $.ajax call in my getPoints(file) method gets skipped when I run getPoints(file) in my on click listener. Does anyone know what might be going wrong? Here is my code :

var map, heatmap;
function initMap() {
    var sanFran = {
        lat: 37.775299,
        lng: -122.432432
    }

    map = new google.maps.Map(document.getElementById('Map'), {
        zoom: 10,
        center: sanFran,
    });

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: getPoints("2016-07-02--11-56-24.json"),
        map: map
      });
};    

function getPoints(file) {
    retArr = [];
    var weblink = "http://localhost:8080/trips/" + file;
    $.ajax({
        url: weblink,
        dataType:"json",
        success:function(data){
            for(var i = 0; i< data.coords.length; i++){
                console.log(data.coords[i]);
                retArr.push(new google.maps.LatLng(data.coords[i].lat, data.coords[i].lng))
            }
        }
    });
    return retArr;
}
$.each(jsTrips,function(k,v){
    $("#"+k).on("click",function(){
        heatmap.set('data', getPoints(v));
    })
})

The json data follows the format:

{
"start_time":some time,
"coords": [{lat,long},{lat,long},{lat,long}],
"end time":some time
}

If any more details are need just let me know and I'll update the question.

Thanks!!!

Did you places the `$.each... ` line of code in `$(dociment).ready..`. If you did not may be the `Div` clicks are not getting bind. Try putting whole code inside `$(document).ready` function. — Kamal Singh, Dec 26 '18 at 21:43
Yea the DOM responds to the click event and I hit the breakpoint in getPoints() when I was debugging so I don't think thats the issue — Tom Kaizer, Dec 26 '18 at 21:46
since ajax is async, it is possible your function returns before ajax finishes its success (blank array) callback which you are setting on heatmap — Karthik Ganesan, Dec 26 '18 at 21:47
Okay great. Now I can suggest you to check the network tab whether your request sent to the server or not. Also try adding `error` callback just like success. Let me know so that I can help in further debugging. — Kamal Singh, Dec 26 '18 at 21:50

score 1 · Answer 1 · answered Dec 26 '18 at 21:51

$.ajax is asynchronous which means the array you return from getPoints will always be empty - the asynchronous success function always happens after getPoints has returned.

You need to reorganize your code to something like:

var map;
function initMap() {
    var sanFran = {
        lat: 37.775299,
        lng: -122.432432
    }

    map = new google.maps.Map(document.getElementById('Map'), {
        zoom: 10,
        center: sanFran,
    });
};    

function getPoints(file) {
    $.ajax({
        url: `http://localhost:8080/trips/${file}`
        dataType: "json",
        success: rawData => {
            const data = rawData.coords.map(({ lat, long }) =>
                new google.maps.LatLng(lat, lng)
            );
            new google.maps.visualization.HeatmapLayer({
                data,
                map
            })
        }
    });
}
$.each(jsTrips,function(k,v){
    $("#"+k).on("click",function(){
        getPoints(v);
    })
})

caveat: not tested

Second $.ajax call gets skipped over

1 Answers1