javascript - Heat map data is not displaying

Question

I am trying to display heatmap. But it is not displaying my own data. But it displays google example data found in https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap But I wonder why the following code data is not working. Can someone tell why is that.

<script type="text/javascript">
    

                    var map, heatmap;

                function initMap() {
                    map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 13,
                        center: {lat: 54.432132, lng: -2.599662},
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

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

                function toggleHeatmap() {
                    heatmap.setMap(heatmap.getMap() ? null : map);
                }

                function changeGradient() {
                    var gradient = [
                        'rgba(0, 255, 255, 0)',
                        'rgba(0, 255, 255, 1)',
                        'rgba(0, 191, 255, 1)',
                        'rgba(0, 127, 255, 1)',
                        'rgba(0, 63, 255, 1)',
                        'rgba(0, 0, 255, 1)',
                        'rgba(0, 0, 223, 1)',
                        'rgba(0, 0, 191, 1)',
                        'rgba(0, 0, 159, 1)',
                        'rgba(0, 0, 127, 1)',
                        'rgba(63, 0, 91, 1)',
                        'rgba(127, 0, 63, 1)',
                        'rgba(191, 0, 31, 1)',
                        'rgba(255, 0, 0, 1)'
                    ]
                    heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
                }

                function changeRadius() {
                    heatmap.set('radius', heatmap.get('radius') ? null : 20);
                }

                function changeOpacity() {
                    heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
                }

                // Heatmap data: 500 Points
                function getPoints() {
                    return [
                                    new google.maps.LatLng(30.376142,-97.763058),
                                            new google.maps.LatLng(30.377782,-97.826027),
                                            new google.maps.LatLng(30.383618,-97.832927),
                                            new google.maps.LatLng(30.330997,-97.824312),
                                            new google.maps.LatLng(30.329975,-97.824823),
                                            new google.maps.LatLng(30.32893,-97.825897),
                                            new google.maps.LatLng(30.328105,-97.827067),
                                            new google.maps.LatLng(30.32727,-97.827947),
                                            new google.maps.LatLng(30.325013,-97.831722),
                                            new google.maps.LatLng(30.324497,-97.833142),
                                            new google.maps.LatLng(30.324097,-97.834267),
                                            new google.maps.LatLng(30.32397,-97.835547),
                                            new google.maps.LatLng(30.323805,-97.836927),
                                            new google.maps.LatLng(30.323942,-97.83824),
                                            new google.maps.LatLng(30.324877,-97.841123),
                                            new google.maps.LatLng(30.325915,-97.84232),
                                            new google.maps.LatLng(30.327208,-97.843092),
                                            new google.maps.LatLng(30.328148,-97.843592),
                                            new google.maps.LatLng(30.329207,-97.844008),
                                            new google.maps.LatLng(30.343418,-97.78904),
                                            new google.maps.LatLng(30.324365,-97.840505),
                                            new google.maps.LatLng(30.323985,-97.838952),
                                            new google.maps.LatLng(30.32527,-97.830937),
                                            new google.maps.LatLng(30.319708,-97.776823),
                                            new google.maps.LatLng(30.315788,-97.776912),
                                            new google.maps.LatLng(30.313778,-97.777208),
                                            new google.maps.LatLng(30.32651,-97.77886),
                                            new google.maps.LatLng(30.32587,-97.77843),
                                            new google.maps.LatLng(30.302503,-97.782878),
                                            new google.maps.LatLng(30.297728,-97.786312),
                                            new google.maps.LatLng(30.295208,-97.786563),
                                            new google.maps.LatLng(30.306518,-97.779587),
                                            new google.maps.LatLng(30.305582,-97.78024),
                                            new google.maps.LatLng(30.301262,-97.783718),
                                            new google.maps.LatLng(30.381402,-97.833952),
                                            new google.maps.LatLng(30.383493,-97.832868),
                                            new google.maps.LatLng(30.377033,-97.824848),
                                            new google.maps.LatLng(30.317047,-97.744832),
                                            new google.maps.LatLng(30.308042,-97.741335),
                                            new google.maps.LatLng(30.307332,-97.74071),
                                            new google.maps.LatLng(30.310128,-97.777952),
                                            new google.maps.LatLng(30.308963,-97.778342),
                                            new google.maps.LatLng(30.382502,-97.832142),
                                            new google.maps.LatLng(30.377058,-97.819847),
                                            new google.maps.LatLng(30.380318,-97.828907),
                                            new google.maps.LatLng(30.389083,-97.743862),
                                            new google.maps.LatLng(30.389755,-97.744062),
                                            new google.maps.LatLng(30.39246,-97.74573),
                                            new google.maps.LatLng(30.392842,-97.744903),
                                            new google.maps.LatLng(30.393863,-97.745982),
                                            new google.maps.LatLng(30.341202,-97.78642),
                                            new google.maps.LatLng(30.342618,-97.787128),
                                            new google.maps.LatLng(30.340067,-97.78641),
                                            new google.maps.LatLng(30.323447,-97.77603),
                                            new google.maps.LatLng(30.31784,-97.776337),
                                            new google.maps.LatLng(30.38905,-97.746228),
                                            new google.maps.LatLng(30.401783,-97.745647),
                                            new google.maps.LatLng(30.41818,-97.74665),
                                            new google.maps.LatLng(30.428812,-97.75771),
                                            new google.maps.LatLng(30.424023,-97.757753),
                                            new google.maps.LatLng(30.427875,-97.760498),
                                            new google.maps.LatLng(30.430145,-97.763022),
                                            new google.maps.LatLng(30.414698,-97.746215),
                                            new google.maps.LatLng(30.398993,-97.746263),
                                            new google.maps.LatLng(30.38708,-97.744095),
                                            new google.maps.LatLng(30.370955,-97.741852),
                                            new google.maps.LatLng(30.300035,-97.784397),
                                            new google.maps.LatLng(30.298888,-97.784688),
                                            new google.maps.LatLng(30.298013,-97.784187),
                                            new google.maps.LatLng(30.377483,-97.825803),
                                            new google.maps.LatLng(30.327795,-97.778072),
                                            new google.maps.LatLng(30.329125,-97.7786),
                                            new google.maps.LatLng(30.332,-97.780143),
                                            new google.maps.LatLng(30.31893,-97.77647),
                                            new google.maps.LatLng(30.317468,-97.776475),
                                            new google.maps.LatLng(30.301273,-97.783267),
                                            new google.maps.LatLng(30.301532,-97.783798),
                                            new google.maps.LatLng(30.299333,-97.784312),
                                            new google.maps.LatLng(30.325182,-97.776738),
                                            new google.maps.LatLng(30.294923,-97.785892),
                                            new google.maps.LatLng(30.377062,-97.823153),
                                            new google.maps.LatLng(30.380535,-97.82939),
                                            new google.maps.LatLng(30.30682,-97.730568),
                                            new google.maps.LatLng(30.295678,-97.78619),
                                            new google.maps.LatLng(30.304935,-97.780005),
                                            new google.maps.LatLng(30.306233,-97.779292),
                                            new google.maps.LatLng(30.310243,-97.77711),
                                            new google.maps.LatLng(30.327475,-97.777863),
                                            new google.maps.LatLng(30.330077,-97.779202),
                                            new google.maps.LatLng(30.331462,-97.779958),
                                            new google.maps.LatLng(30.334212,-97.781392),
                                            new google.maps.LatLng(30.337953,-97.784138),
                                            new google.maps.LatLng(30.343863,-97.788038),
                                            new google.maps.LatLng(30.331865,-97.781497),
                                            new google.maps.LatLng(30.329332,-97.780095),
                                            new google.maps.LatLng(30.327977,-97.779485),
                                            new google.maps.LatLng(30.325235,-97.77835),
                                            new google.maps.LatLng(30.32383,-97.77789),
                                            new google.maps.LatLng(30.377328,-97.820673),
                                            new google.maps.LatLng(30.29702,-97.785102),
                                            new google.maps.LatLng(30.308217,-97.77802),
                                            new google.maps.LatLng(30.310742,-97.777158),
                                            new google.maps.LatLng(30.312037,-97.776782),
                                            new goog

Answer 1

You are missing the async defer properties in the Google Maps Javascript API v3 include. Should be:

<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization&callback=initMap" defer async></script>

After that it works, but the center of the map is not where the data is (and the heatmap is hard to see over the map or satellite tiles).

var map, heatmap;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {
      lat: 30.376142,
      lng: -97.763058
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: getPoints(),
    map: map
  });
  heatmap.set('radius', heatmap.get('radius') ? null : 50);
  heatmap.set('opacity', heatmap.get('opacity') ? null : 0.8);
}

function toggleHeatmap() {
  heatmap.setMap(heatmap.getMap() ? null : map);
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}

function changeRadius() {
  heatmap.set('radius', heatmap.get('radius') ? null : 20);
}

function changeOpacity() {
  heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}

// Heatmap data: 500 Points
function getPoints() {
  return [
    new google.maps.LatLng(30.376142, -97.763058),
    new google.maps.LatLng(30.377782, -97.826027),
    new google.maps.LatLng(30.383618, -97.832927),
    new google.maps.LatLng(30.330997, -97.824312),
    new google.maps.LatLng(30.329975, -97.824823),
    new google.maps.LatLng(30.32893, -97.825897),
    new google.maps.LatLng(30.328105, -97.827067),
    new google.maps.LatLng(30.32727, -97.827947),
    new google.maps.LatLng(30.325013, -97.831722),
    new google.maps.LatLng(30.324497, -97.833142),
    new google.maps.LatLng(30.324097, -97.834267),
    new google.maps.LatLng(30.32397, -97.835547),
    new google.maps.LatLng(30.323805, -97.836927),
    new google.maps.LatLng(30.323942, -97.83824),
    new google.maps.LatLng(30.324877, -97.841123),
    new google.maps.LatLng(30.325915, -97.84232),
    new google.maps.LatLng(30.327208, -97.843092),
    new google.maps.LatLng(30.328148, -97.843592),
    new google.maps.LatLng(30.329207, -97.844008),
    new google.maps.LatLng(30.343418, -97.78904),
    new google.maps.LatLng(30.324365, -97.840505),
    new google.maps.LatLng(30.323985, -97.838952),
    new google.maps.LatLng(30.32527, -97.830937),
    new google.maps.LatLng(30.319708, -97.776823),
    new google.maps.LatLng(30.315788, -97.776912),
    new google.maps.LatLng(30.313778, -97.777208),
    new google.maps.LatLng(30.32651, -97.77886),
    new google.maps.LatLng(30.32587, -97.77843),
    new google.maps.LatLng(30.302503, -97.782878),
    new google.maps.LatLng(30.297728, -97.786312),
    new google.maps.LatLng(30.295208, -97.786563),
    new google.maps.LatLng(30.306518, -97.779587),
    new google.maps.LatLng(30.305582, -97.78024),
    new google.maps.LatLng(30.301262, -97.783718),
    new google.maps.LatLng(30.381402, -97.833952),
    new google.maps.LatLng(30.383493, -97.832868),
    new google.maps.LatLng(30.377033, -97.824848),
    new google.maps.LatLng(30.317047, -97.744832),
    new google.maps.LatLng(30.308042, -97.741335),
    new google.maps.LatLng(30.307332, -97.74071),
    new google.maps.LatLng(30.310128, -97.777952),
    new google.maps.LatLng(30.308963, -97.778342),
    new google.maps.LatLng(30.382502, -97.832142),
    new google.maps.LatLng(30.377058, -97.819847),
    new google.maps.LatLng(30.380318, -97.828907),
    new google.maps.LatLng(30.389083, -97.743862),
    new google.maps.LatLng(30.389755, -97.744062),
    new google.maps.LatLng(30.39246, -97.74573),
    new google.maps.LatLng(30.392842, -97.744903),
    new google.maps.LatLng(30.393863, -97.745982),
    new google.maps.LatLng(30.341202, -97.78642),
    new google.maps.LatLng(30.342618, -97.787128),
    new google.maps.LatLng(30.340067, -97.78641),
    new google.maps.LatLng(30.323447, -97.77603),
    new google.maps.LatLng(30.31784, -97.776337),
    new google.maps.LatLng(30.38905, -97.746228),
    new google.maps.LatLng(30.401783, -97.745647),
    new google.maps.LatLng(30.41818, -97.74665),
    new google.maps.LatLng(30.428812, -97.75771),
    new google.maps.LatLng(30.424023, -97.757753),
    new google.maps.LatLng(30.427875, -97.760498),
    new google.maps.LatLng(30.430145, -97.763022),
    new google.maps.LatLng(30.414698, -97.746215),
    new google.maps.LatLng(30.398993, -97.746263),
    new google.maps.LatLng(30.38708, -97.744095),
    new google.maps.LatLng(30.370955, -97.741852),
    new google.maps.LatLng(30.300035, -97.784397),
    new google.maps.LatLng(30.298888, -97.784688),
    new google.maps.LatLng(30.298013, -97.784187),
    new google.maps.LatLng(30.377483, -97.825803),
    new google.maps.LatLng(30.327795, -97.778072),
    new google.maps.LatLng(30.329125, -97.7786),
    new google.maps.LatLng(30.332, -97.780143),
    new google.maps.LatLng(30.31893, -97.77647),
    new google.maps.LatLng(30.317468, -97.776475),
    new google.maps.LatLng(30.301273, -97.783267),
    new google.maps.LatLng(30.301532, -97.783798),
    new google.maps.LatLng(30.299333, -97.784312),
    new google.maps.LatLng(30.325182, -97.776738),
    new google.maps.LatLng(30.294923, -97.785892),
    new google.maps.LatLng(30.377062, -97.823153),
    new google.maps.LatLng(30.380535, -97.82939),
    new google.maps.LatLng(30.30682, -97.730568),
    new google.maps.LatLng(30.295678, -97.78619),
    new google.maps.LatLng(30.304935, -97.780005),
    new google.maps.LatLng(30.306233, -97.779292),
    new google.maps.LatLng(30.310243, -97.77711),
    new google.maps.LatLng(30.327475, -97.777863),
    new google.maps.LatLng(30.330077, -97.779202),
    new google.maps.LatLng(30.331462, -97.779958),
    new google.maps.LatLng(30.334212, -97.781392),
    new google.maps.LatLng(30.337953, -97.784138),
    new google.maps.LatLng(30.343863, -97.788038),
    new google.maps.LatLng(30.331865, -97.781497),
    new google.maps.LatLng(30.329332, -97.780095),
    new google.maps.LatLng(30.327977, -97.779485),
    new google.maps.LatLng(30.325235, -97.77835),
    new google.maps.LatLng(30.32383, -97.77789),
    new google.maps.LatLng(30.377328, -97.820673),
    new google.maps.LatLng(30.29702, -97.785102),
    new google.maps.LatLng(30.308217, -97.77802),
    new google.maps.LatLng(30.310742, -97.777158),
    new google.maps.LatLng(30.312037, -97.776782),
    new google.maps.LatLng(30.338948, -97.784927),
    new google.maps.LatLng(30.347213, -97.79304),
    new google.maps.LatLng(30.344195, -97.789585),
    new google.maps.LatLng(30.342562, -97.78787),
    new google.maps.LatLng(30.330348, -97.78049),
    new google.maps.LatLng(30.376892, -97.82398),
    new google.maps.LatLng(30.309592, -97.740372),
    new google.maps.LatLng(30.306258, -97.730408),
    new google.maps.LatLng(30.306848, -97.73011),
    new google.maps.LatLng(30.4241, -97.748902),
    new google.maps.LatLng(30.431897, -97.764375),
    new google.maps.LatLng(30.440388, -97.780253),
    new google.maps.LatLng(30.451003, -97.79104),
    new google.maps.LatLng(30.46129, -97.794052),
    new google.maps.LatLng(30.459553, -97.794432),
    new google.maps.LatLng(30.456557, -97.792735),
    new google.maps.LatLng(30.442708, -97.784803),
    new google.maps.LatLng(30.43294, -97.767508),
    new google.maps.LatLng(30.424222, -97.749967),
    new google.maps.LatLng(30.408777, -97.745552),
    new google.maps.LatLng(30.397733, -97.746617),
    new google.maps.LatLng(30.395322, -97.746605),
    new google.maps.LatLng(30.383802, -97.74251),
    new google.maps.LatLng(30.305052, -97.741557),
    new google.maps.LatLng(30.304677, -97.741252),
    new google.maps.LatLng(30.335193, -97.753927),
    new google.maps.LatLng(30.378168, -97.826567),
    new google.maps.LatLng(30.301155, -97.782335),
    new google.maps.LatLng(30.334332, -97.781803),
    new google.maps.LatLng(30.320513, -97.775623),
    new google.maps.LatLng(30.326532, -97.777428),
    new google.maps.LatLng(30.305415, -97.780525),
    new google.maps.LatLng(30.304393, -97.781243),
    new google.maps.LatLng(30.297278, -97.786645),
    new google.maps.LatLng(30.351092, -97.808128),
    new google.maps.LatLng(30.346838, -97.8106),
    new google.maps.LatLng(30.347857, -97.809957),
    new google.maps.LatLng(30.301917, -97.783457),
    new google.maps.LatLng(30.297682, -97.789248),
    new google.maps.LatLng(30.296065, -97.787537),
    new google.maps.LatLng(30.296138, -97.785443),
    new google.maps.LatLng(30.310997, -97.733697),
    new google.maps.LatLng(30.34363, -97.789163),
    new google.maps.LatLng(30.34128, -97.787087),
    new google.maps.LatLng(30.323565, -97.777208),
    new google.maps.LatLng(30.29806, -97.785247),
    new google.maps.LatLng(30.31629, -97.775518),
    new google.maps.LatLng(30.381697, -97.83175),
    new google.maps.LatLng(30.302878, -97.738402),
    new google.maps.LatLng(30.380643, -97.829543),
    new google.maps.LatLng(52.051935, 0.733472),
    new google.maps.LatLng(52.052477, 0.731015),
    new google.maps.LatLng(52.052318, 0.731873),
    new google.maps.LatLng(52.052938, 0.73204),
    new google.maps.LatLng(51.893798, 0.576748),
    new google.maps.LatLng(51.885613, 0.584097),
    new google.maps.LatLng(51.881877, 0.584883),
    new google.maps.LatLng(51.866607, 0.581668),
    new google.maps.LatLng(51.869795, 0.530607),
    new google.maps.LatLng(51.867852, 0.521045),
    new google.maps.LatLng(51.870543, 0.499553),
    new google.maps.LatLng(51.874002, 0.476757),
    new google.maps.LatLng(51.874308, 0.414177),
    new google.maps.LatLng(51.869642, 0.326567),
    new google.maps.LatLng(51.877335, 0.299717),
    new google.maps.LatLng(51.87165, 0.217872),
    new google.maps.LatLng(51.86925, 0.197805),
    new google.maps.LatLng(51.85209, 0.184622),
    new google.maps.LatLng(51.833967, 0.193422),
    new google.maps.LatLng(51.817357, 0.184612),
    new google.maps.LatLng(51.718647, 0.142915),
    new google.maps.LatLng(51.712032, 0.145493),
    new google.maps.LatLng(51.68026, 0.126207),
    new google.maps.LatLng(51.634735, 0.075582),
    new google.maps.LatLng(51.617777, 0.062272),
    new google.maps.LatLng(51.57627, 0.044962),
    new google.maps.LatLng(51.569168, 0.051418),
    new google.maps.LatLng(51.558993, 0.06143),
    new google.maps.LatLng(51.555813, 0.065573),
    new google.maps.LatLng(51.55524, 0.06133),
    new google.maps.LatLng(51.553663, 0.056078),
    new google.maps.LatLng(51.552315, 0.052383),
    new google.maps.LatLng(51.551452, 0.049563),
    new google.maps.LatLng(51.550223, 0.046523),
    new google.maps.LatLng(51.549243, 0.043645),
    new google.maps.LatLng(51.547662, 0.036547),
    new google.maps.LatLng(51.547095, 0.0325),
    new google.maps.LatLng(51.546617, 0.027202),
    new google.maps.LatLng(51.545893, 0.02136),
    new google.maps.LatLng(51.542803, 0.009708),
    new google.maps.LatLng(51.541403, 0.00287),
    new google.maps.LatLng(51.539573, 3.5E-5),
    new google.maps.LatLng(51.536883, -0.003293),
    new google.maps.LatLn