Geo heat map(google) with large data

Question

I want to plot a heat map in google map to show the taxi-ride distribution of a city.

I got around 4000 data of the taxi-ride starting location(latitude and longitude).

Here are some of my script:

First I set up the google map:

var hongkong = new google.maps.LatLng(22.28552,114.15769 );

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

Then, I read the data from JSON file and make a heat map:

jQuery.getJSON("data.json", function(data) {
    var heatmapData = [];
    jQuery.each(data, function(key, val) {
          heatmapData.push(new google.maps.LatLng(val.fromLocation.lat, val.fromLocation.lng));
    });

    var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatmapData
    });
    heatmap.setMap(map);
});

---

What I got:

You can see nothing. Then I zoom out, I got:

What I expected is something like this:

What is the problem? Is it the data I got is too close to each other?

Is there a better way to plot the heat map to show the distribution of taxi-riding? Thank you.

Answer 1

Your JSON file has got the latitudes and longitudes as strings. Google's LatLng constructor expects those values to be numbers. Try this, which converts them from strings like "22.37898" to floats like 22.37898

heatmapData.push(new google.maps.LatLng(
    parseFloat(val.fromLocation.lat), 
    parseFloat(val.fromLocation.lng))
);