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:

<scriptsrc="https://maps.googleapis.com/maps/api/js?libraries=visualization&callback=initMap"deferasync></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;

functioninitMap() {
  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);
}

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

functionchangeGradient() {
  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);
}

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

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

// Heatmap data: 500 PointsfunctiongetPoints() {
  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;
}
<scriptsrc="https://maps.googleapis.com/maps/api/js?libraries=visualization&callback=initMap"deferasync></script><divid="floating-panel"><buttononclick="toggleHeatmap()">Toggle Heatmap</button><buttononclick="changeGradient()">Change gradient</button><buttononclick="changeRadius()">Change radius</button><buttononclick="changeOpacity()">Change opacity</button></div><divid="map"></div>

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