Skip to content Skip to sidebar Skip to footer
Home / Google Maps Api 3 / Javascript

Heat Map Data Is Not Displaying

Post a Comment
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/examp

Solution 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.LatLng(51.53482, -0.005905),
    new google.maps.LatLng(51.531127, -0.010908),
    new google.maps.LatLng(51.52845, -0.017397),
    new google.maps.LatLng(51.527583, -0.022977),
    new google.maps.LatLng(51.526188, -0.029723),
    new google.maps.LatLng(51.524787, -0.035477),
    new google.maps.LatLng(51.523425, -0.038367),
    new google.maps.LatLng(51.522198, -0.043635),
    new google.maps.LatLng(51.518468, -0.062577),
    new google.maps.LatLng(51.518047, -0.064378),
    new google.maps.LatLng(51.517877, -0.065125),
    new google.maps.LatLng(51.517325, -0.066807),
    new google.maps.LatLng(51.5164, -0.068813),
    new google.maps.LatLng(51.51575, -0.070142),
    new google.maps.LatLng(51.51511, -0.07163),
    new google.maps.LatLng(51.511512, -0.071685),
    new google.maps.LatLng(51.510862, -0.072738),
    new google.maps.LatLng(51.510475, -0.072638),
    new google.maps.LatLng(51.506388, -0.07468),
    new google.maps.LatLng(51.504643, -0.075903),
    new google.maps.LatLng(51.502332, -0.077372),
    new google.maps.LatLng(51.500567, -0.07841),
    new google.maps.LatLng(51.498427, -0.079458),
    new google.maps.LatLng(51.496305, -0.082485),
    new google.maps.LatLng(51.495693, -0.083167),
    new google.maps.LatLng(51.49395, -0.08581),
    new google.maps.LatLng(51.494155, -0.091293),
    new google.maps.LatLng(51.49458, -0.096403),
    new google.maps.LatLng(51.494997, -0.098175),
    new google.maps.LatLng(51.495098, -0.099733),
    new google.maps.LatLng(51.495302, -0.101073),
    new google.maps.LatLng(51.493708, -0.100445),
    new google.maps.LatLng(51.490753, -0.103322),
    new google.maps.LatLng(51.486255, -0.107798),
    new google.maps.LatLng(51.483943, -0.110167),
    new google.maps.LatLng(51.48183, -0.112263),
    new google.maps.LatLng(51.47842, -0.115917),
    new google.maps.LatLng(51.477592, -0.116702),
    new google.maps.LatLng(51.473478, -0.121012),
    new google.maps.LatLng(51.470935, -0.124097),
    new google.maps.LatLng(51.46964, -0.125537),
    new google.maps.LatLng(51.466755, -0.128687),
    new google.maps.LatLng(51.465615, -0.129428),
    new google.maps.LatLng(51.464115, -0.131725),
    new google.maps.LatLng(51.463477, -0.133255),
    new google.maps.LatLng(51.462492, -0.135865),
    new google.maps.LatLng(51.461123, -0.140292),
    new google.maps.LatLng(51.463303, -0.142348),
    new google.maps.LatLng(51.46602, -0.141155),
    new google.maps.LatLng(55.49943, -3.690543),
    new google.maps.LatLng(55.48597, -3.694853),
    new google.maps.LatLng(55.467263, -3.670607),
    new google.maps.LatLng(55.468255, -3.657407),
    new google.maps.LatLng(55.457865, -3.643108),
    new google.maps.LatLng(55.444803, -3.650557),
    new google.maps.LatLng(55.433797, -3.644252),
    new google.maps.LatLng(55.428537, -3.616312),
    new google.maps.LatLng(55.422082, -3.589092),
    new google.maps.LatLng(55.409677, -3.566693),
    new google.maps.LatLng(55.398247, -3.541743),
    new google.maps.LatLng(55.386357, -3.521547),
    new google.maps.LatLng(55.368693, -3.512998),
    new google.maps.LatLng(55.350873, -3.50614),
    new google.maps.LatLng(55.337975, -3.483012),
    new google.maps.LatLng(55.322162, -3.467308),
    new google.maps.LatLng(55.307273, -3.446352),
    new google.maps.LatLng(55.290017, -3.437375)
  ];
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  width: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  background-color: #fff;
  border: 1px solid #999;
  left: 25%;
  padding: 5px;
  position: absolute;
  top: 10px;
  z-index: 5;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization&callback=initMap" defer async></script>
<div id="floating-panel">
  <button onclick="toggleHeatmap()">Toggle Heatmap</button>
  <button onclick="changeGradient()">Change gradient</button>
  <button onclick="changeRadius()">Change radius</button>
  <button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map"></div>

You may like these posts

Post a Comment for "Heat Map Data Is Not Displaying"