CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3heatmap
Crash
Crash

Reputation: 219

Google Maps API v 3: Heatmap Creation Issue

I am trying to work with the google.maps.visualization library. I have included the library in my code and all that, and most of it seems to be working, but when I get to the point of creating the heatmap, I get an error about 'Invalid value at position 96677: [object Object]'. I am not sure what this problem is about, but the error report includes a line of the Google API code:

var c;
M(b,function(b,e){
    try{
        a(b)||(c="Invalid value at position "+(e+(": "+b)))
    }catch(f){
        c="Error in element at position "+(e+(": ("+(f[Pb]+")")))}});c&&aa(ja(c));return j
    }
}

I looked through the API code a bit, but it's pretty difficult to find anything useful in there. The code I am using to create the heatmap layer is as follows:

$.ajax({
    url: "../Yield/getYieldData.php",
    success: function(text) {
        var data;
//      var yieldPoints = new google.maps.MVCArray();
        var yieldPoints = [];

        try{
            data = $.parseJSON(text);
        } catch (e) {
            alert("ERROR: " + e);
        }

        for(i=0; i < data.points.length; i++) {
//          yieldPoints.push({ location: new google.maps.LatLng(data.points[i].lat, data.points[i].lon), weight: data.points[i].yield });
            yieldPoints[i] = { location: new google.maps.LatLng(data.points[i].lat, data.points[i].lon), weight: data.points[i].yield };
        }
        var heatMap = new google.maps.visualization.HeatmapLayer({ data: yieldPoints });
        heatMap.setMap(map);
    }
});

I'm not sure where the problem is coming from here, but I used the Google API documentation as a template, as found at https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps (about a third of the way down the page, under the heading 'Adding Weighted Data Points'). As you can see, I also attempted to create the array as an MVCArray, as described in that documentation, but that didn't change anything. In case it's relevant, here's a short sample of the JSON data that is being received from the 'getYieldData.php' call:

{"points":[{"lat":"38.1513366000","lon":"-97.4341659000","yield":"0"},{"lat":"38.1513748000","lon":"-97.4341125000","yield":"0"},{"lat":"38.1513938000","lon":"-97.4341125000","yield":"0"},{"lat":"38.1493263000","lon":"-97.4339447000","yield":"0"},{"lat":"38.1493339000","lon":"-97.4339447000","yield":"0"},{"lat":"38.1493377000","lon":"-97.4339447000","yield":"0"},{"lat":"38.1483650000","lon":"-97.4358291000","yield":"0"},{"lat":"38.1484031000","lon":"-97.4358062000","yield":"0"},

Hopefully this is enough info for someone to see what the problem is- any help at all would be much appreciated. Thank you.

Upvotes: 4

Views: 4312

Answers (1)

Engineer
Engineer

Reputation: 48793

weight should be a Number,not a String. So you have 2 choices:

  • avoid quotes in JSON:

    {"lat":"38.1513366000","lon":"-97.4341659000","yield":0}
              //no quote wraps    'yield' ------------^

  • cast yield to Number:

    yieldPoints[i] = { 
           location: new google.maps.LatLng(data.points[i].lat, data.points[i].lon),
           weight: +data.points[i].yield };
};                 ^----- plus('+') is the fastest way for converting string to number

Upvotes: 6

Related Questions