Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
130 views
Welcome To Ask or Share your Answers For Others

1 Answer

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...