热图数据不显示

本文介绍了热图数据不显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我试图显示热图。但它不显示我自己的数据。但它显示了 developers.google中的google示例数据/ maps / documentation / javascript / examples / layer-heatmap 但我想知道为什么下面的代码数据不工作。有人可以告诉我们为什么。

< script type =text / javascript> var map，heatmap; （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）; } //热图数据：500点函数getPoints（）{return [new google.maps.LatLng（30.376142，-97.763058），new google.maps.LatLng（30.377782，-97.826027），new google.maps.LatLng（30.383618，新的google.maps.LatLng（30.330997，-97.824312），新的google.maps.LatLng（30.329975，-97.824823），新的google.maps.LatLng（30.32893，-97.825897），新的google.maps.LatLng（新的google.maps.LatLng（30.32727，-97.827947），新的google.maps.LatLng（30.325013，-97.831722），新的google.maps.LatLng（30.324497，-97.833142），新的google.maps.LatLng（30.324097，-97.834267），新的google.maps.LatLng（30.32397，-97.835547），新的google.maps.LatLng（30.323805，-97.836927），新的google.maps.LatLng（30.323942，-97.83824 ），新的google.maps.LatLng（30.324877，-97.841123），新的google.maps.LatLng（30.325915，-97.84232），新的google.maps.LatLng（30.327208，-97.843092），新的google.maps.LatLng（30.328148，新的google.maps.LatLng（30.329207，-97.844008），新的google.maps.LatLng（30.343418，-97.78904），新的google.maps.LatLng（30.324365，-97.840505），新的google.maps.LatLng（30.323985，-97.838952），新的google.maps.LatLng（30.32527，-97.830937），新的google.maps.LatLng（30.319708，-97.776823），新的google.maps.LatLng（30.315788，-97.776912 ），新的google.maps.LatLng（30.313778，-97.777208），新的google.maps.LatLng（30.32651，-97.77886），新的google.maps.LatLng（30.32587，-97.77843），新的google.maps.LatLng（30.302503，新的google.maps.LatLng（30.297728，-97.786312），新的google.maps.LatLng（30.295208，-97.786563），新的google.maps.LatLng（30.306518，-97.779587），新的google.maps.L新的google.maps.LatLng（30.301262，-97.783718），新的google.maps.LatLng（30.381402，-97.833952），新的google.maps.LatLng（30.383493，-97.832868），新的Google。 maps.LatLng（30.377033，-97.824848），新的google.maps.LatLng（30.317047，-97.744832），新的google.maps.LatLng（30.308042，-97.741335），新的google.maps.LatLng（30.307332，-97.74071），新的google.maps.LatLng（30.310128，-97.777952），新的google.maps.LatLng（30.308963，-97.778342），新的google.maps.LatLng（30.382502，-97.832142），新的google.maps.LatLng（30.377058，-97.819新的google.maps.LatLng（30.380318，-97.828907），新的google.maps.LatLng（30.389083，-97.743862），新的google.maps.LatLng（30.389755，-97.744062），新的google.maps.LatLng（30.39246 ，新的google.maps.LatLng（30.392842，-97.744903），新的google.maps.LatLng（30.393863，-97.745982），新的google.maps.LatLng（30.341202，-97.78642），新的google.maps.LatLng （30.342618，-97.787128），新的google.maps.LatLng（30.340067，-97.78641），新的google.maps.LatLng（30.323447，-97.77603），新的google.maps.LatLng（30.31784，-97.776337），新的google.maps.LatLng（30.38905，-97.746228），新的google.maps.LatLng（30.401783，-97.745647），新的google.maps.LatLng（30.41818，-97.74665），新的google.maps.LatLng（30.428812，-97.75771 ），新的google.maps.LatLng（30.424023，-97.757753），新的google.maps.LatLng（30.427875，-97.760498），新的google.maps.LatLng（30.430145，-97.763022），新的google.maps.LatLng（30.414698，新的google.maps.LatLng（30.398993，-97.746263），新的google.maps.LatLng（30.38708，-97.744095），新的google.maps.LatLng（30.370955，-97.741852），新的google.maps.LatLng（30.300035，-97.784397），新的google.maps.LatLng（30.298888，-97.784688），新的google.maps.LatLng（30.298013，-97.784187），新的google.maps.LatLng（30.377483，-97.825803） ，新的google.maps.LatLng（30.327795，-97.778072），新的google.maps.LatLng（30.329125，-97.7786），新的google.maps.LatLng（30.332，-97.780143），新的google.maps.LatLng（30.31893， - 新的google.maps.LatLng（30.317468，-97.776475），新的google.maps.LatLng（30.301273，-97.783267），新的google.maps.LatLng（30.301532，-97.783798），新的google.maps.LatLng（30.299333） ，新的google.maps.LatLng（30.325182，-97.776738），新的google.maps.LatLng（30.294923，-97.785892），新的google.maps.LatLng（30.377062，-97.823153），新的google.maps.LatLng （30.380535，-97.82939），新的google.maps.LatLng（30.30682，-97.730568），新的google.maps.LatLng（30.295678，-97.78619），新的google.maps.LatLng（30.304935，-97.780005），新的google.maps .LatLng（30.306233，-97.779292），新的google.maps.LatLng（30.310243，-97.77711），新的google.maps.LatLng（30.327475，-97.777863），新的google.maps.LatLng（30.330077，-97.779202），新的google.maps.LatLng（30.331462，-97.779958），新的google.maps.LatLng（30.334212，-97.781392），新的google.maps.LatLng（30.337953，-97.784138），新的google.maps.LatLng（30.343863，-97.788038 ），新的google.maps.LatLng（30.331865，-97.781497），新的google.maps.LatLng（30.329332，-97.780095），新的google.maps.LatLng（30.327977，-97.779485），新的google.maps.LatLng（30.325235，新的google.maps.LatLng（30.32383，-97.77789），新的google.maps.LatLng（30.377328，-97.820673），新的google.maps.LatLng（30.29702，-97.785102），新的google.maps.LatLng（30.308217，-97.77802），新的google.maps.LatLng（30.310742，-97.777158），新的google.maps.LatLng（30.312037，-97.776782）​​，新的google.maps.LatLng（30.338948，-97.784927 ），新的google.maps.LatLng（30.347213，-97.79304），新的google.maps.LatLng（30.344195，-97.789585），新的google.maps.LatLng（30.342562，-97.78787），新的google.maps.LatLng（30.330348，新的google.maps.LatLng（30.376892，-97.82398），新的google.maps.LatLng（30.309592，-97.740372），新的google.maps.LatLng（30.306258，-97.730408），新的google.maps.Lat新的google.maps.LatLng（30.4241，-97.748902），新的google.maps.LatLng（30.431897，-97.764375），新的google.maps.LatLng（30.440388，-97.780253），新的Google。 maps.LatLng（30.451003，-97.79104），新的google.maps.LatLng（30.46129，-97.794052），新的google.maps.LatLng（30.459553，-97.794432），新的google.maps.LatLng（30.456557，-97.792735），新的google.maps.LatLng（30.442708，-97.784803），新的google.maps.LatLng（30.43294，-97.767508），新的google.maps.LatLng（30.424222，-97.749967），新的google.maps.LatLng（30.408777，-97.745552） ，新的google.maps.LatLng（30.397733，-97.746617），新的google.maps.LatLng（30.395322，-97.746605），新的google.maps.LatLng（30.383802，-97.74251），新的google.maps.LatLng（30.305052，-97.741557 ），新的google.maps.LatLng（30.304677，-97.741252），新的google.maps.LatLng（30.335193，-97.753927），新的google.maps.LatLng（30.378168，-97.826567），新的google.maps.LatLng（30.301155，新的google.maps.LatLng（30.334332，-97.781803），新的google.maps.LatLng（30.320513，-97.775623），新的google.maps.LatLng（30.326532，-97.777428），新的google.maps.LatLng（30.305415，-97.780525），新的google.maps.LatLng（30.304393，-97.781243），新的google.maps.LatLng（30.297278，-97.786645），新的google.maps.LatLng（30.351092，-97.808128 ），新的google.maps.LatLng（30.346838，-97.8106），新的google.maps.LatLng（30.347857，-97.809957），新的google.maps.LatLng（30.301917，-97.783457），新的google.maps.LatLng（30.297682，新的google.maps.LatLng（30.296065，-97.787537），新的google.maps.LatLng（30.296138，-97.785443），新的google.maps.LatLng（30.310997，-97.733697），ne w google.maps.LatLng（30.34363，-97.789163），新的google.maps.LatLng（30.34128，-97.787087），新的google.maps.LatLng（30.323565，-97.777208），新的google.maps.LatLng（30.29806，-97.785247 ），新的google.maps.LatLng（30.31629，-97.775518），新的google.maps.LatLng（30.381697，-97.83175），新的google.maps.LatLng（30.302878，-97.738402），新的google.maps.LatLng（30.380643，新的google.maps.LatLng（52.051935,0.733472），新的google.maps.LatLng（52.052477,0.731015），新的google.maps.LatLng（52.052318,0.731873），新的google.maps.LatLng（52.052938,0新的google.maps.LatLng（51.893798,0.576748），新的google.maps.LatLng（51.885613,0.584097），新的google.maps.LatLng（51.881877,0.584883），新的google.maps.LatLng（51.866607,0.581668） ），新的google.maps.LatLng（51.869795,0.530607），新的google.maps.LatLng（51.867852,0.521045），新的google.maps.LatLng（51.870543,0.499553），新的google.maps.LatLng（51.874002,0.476757），新的google.maps.LatLng（51.874308,0.414177），新的google.maps.LatLng（51.869642,0.326567），新的google.maps.LatLng（51.877335,0.299717），新的google.maps.LatLng（51.87165,0.217872），新的google.maps.LatLng（51.86925,0.197805），新的google.maps.LatLng（51.85209,0.184622），新的google.maps.LatLng（51.833967,0.193422），新的google .maps.LatLng（51.817357,0.184612），新的google.maps.LatLng（51.718647,0.142915），新的google.maps.LatLng（51.712032,0.145493），新的google.maps.LatLng（51.68026,0.126207），新的google.maps .LatLng（51.634735,0.075582），新的google.maps.LatLng（51.617777,0.062272），新的google.maps.LatLng（51.57627,0.044962），新的google.maps.LatLng（51.569168,0.0514 18），新的google.maps.LatLng（51.558993,0.06143），新的google.maps.LatLng（51.555813,0.065573），新的google.maps.LatLng（51.55524,0.06133），新的google.maps.LatLng（51.553663,0.056078） ，新的google.maps.LatLng（51.552315,0.052383），新的google.maps.LatLng（51.551452,0.049563），新的google.maps.LatLng（51.550223,0.046523），新的google.maps.LatLng（51.549243,0.043645），新的google.maps.LatLng（51.547662,0.036547），新的google.maps.LatLng（51.547095,0.0325），新的google.maps.LatLng（51.546617,0.027202），新的google.maps.LatLng（51.545893,0.02136），新的google.maps.LatLng（51.542803,0.009708），新的google.maps.LatLng（51.541403,0.00287），新的google.maps.LatLng（51.539573,3.5E-5） ，新的google.maps.LatLng（51.536883，-0.003293），新的google.maps.LatLng（51.53482，-0.005905），新的google.maps.LatLng（51.531127，-0.010908），新的google.maps.LatLng（51.52845， - 新的google.maps.LatLng（51.527583，-0.022977），新的google.maps.LatLng（51.526188，-0.029723），新的google.maps.LatLng（51.524787，-0.035477），新的google.maps.LatLng（51.523425 ，-0.038367 ），新的google.maps.LatLng（51.522198，-0.043635），新的google.maps.LatLng（51.518468，-0.062577），新的google.maps.LatLng（51.518047，-0.064378），新的google.maps.LatLng（51.517877，新的google.maps.LatLng（51.517325，-0.066807），新的google.maps.LatLng（51.5164，-0.068813），新的google.maps.LatLng（51.51575，-0.070142），新的google.maps.LatLng（新的google.maps.LatLng（51.511512，-0.071685），新的google.maps.LatLng（51.510862，-0.072738），新的google.maps.LatLng（51.510475，-0.072638），新的google.maps.LatLng（51.506388，-0.07468），新的google.maps.LatLng（51.504643，-0.075903），新的google.maps.LatLng（51.502332，-0.077372），新的google.maps.LatLng（51.500567，-0.07841 ），新的google.maps.LatLng（51.498427，-0.079458），新的google.maps.LatLng（51.496305，-0.082485），新的google.maps.LatLng（51.495693，-0.083167），新的google.maps.LatLng（51.49395，新的google.maps.LatLng（51.494155，-0.091293），新的google.maps.LatLng（51.49458，-0.096403），新的google.maps.LatLng（51.494997，-0.098175），新的google.maps.LatLng（ 51.49新的google.maps.LatLng（51.495302，-0.101073），新的google.maps.LatLng（51.493708，-0.100445），新的google.maps.LatLng（51.490753，-0.103322），新的google.maps。 LatLng（51.486255，-0.107798），新的google.maps.LatLng（51.483943，-0.110167），新的google.maps.LatLng（51.48183，-0.112263），新的google.maps.LatLng（51.47842，-0.115917），新的Google。 maps.LatLng（51.477592，-0.116702），新的google.maps.LatLng（51.473478，-0.121012），新的google.maps.LatLng（51.470935，-0.124097），新的google.maps.LatLng（51.46964，-0.125537），新的google.maps.LatLng（51.466755，-0.128687），新的google.maps.LatLng（51.465615，-0.129428），新的google.maps.LatLng（51.464115，-0.131725），新的google.maps.LatLng（51.463477，-0.133255 ），新的google.maps.LatLng（51.462492，-0.135865），新的google.maps.LatLng（51.461123，-0.140292），新的google.maps.LatLng（51.463303，-0.142348），新的google.maps.LatLng（51.46602，新的google.maps.LatLng（55.49943，-3.690543），新的google.maps.LatLng（55.48597，-3.694853），新的google.maps.LatLng（55.467263，-3.670607），新的google （55.468255，-3.657407），新的google.maps.LatLng（55.457865，-3.643108），新的google.maps.LatLng（55.444803，-3.650557），新的google.maps.LatLng（55.433797，-3.644252），新的google.maps.LatLng（55.428537，-3.616312），新的google.maps.LatLng（55.422082，-3.589092），新的google.maps.LatLng（55.409677，-3.566693），新的google.maps.LatLng（55.398247，-3.541743 ），新的google.maps.LatLng（55.386357，-3.521547），新的google.maps.LatLng（55.368693，-3.512998），新的google.maps.LatLng（55.350873，-3.50614），新的google.maps.LatLng（55.337975， -3.483012） ，新的google.maps.LatLng（55.322162，-3.467308），新的google.maps.LatLng（55.307273，-3.446352），新的google.maps.LatLng（55.290017，-3.437375）]; }< / script> < script src =maps.googleapis/maps/api/js?libraries=visualization&callback=initMap>< / script>

< style> html，body {height：100％;保证金：0;填充：0; } #map {height：100％; }＃floating-panel {position：absolute;顶部：10px;左：25％; z-index：5; background-color：#fff;填充：5px;边界：1px固体＃999; text-align：center; font-family：'Roboto'，'sans-serif'; line-height：30px; padding-left：10px; }＃浮动面板{background-color：#fff;边界：1px固体＃999;左：25％;填充：5px;位置：绝对;顶部：10px; z-index：5; }

< div id =浮动面板> < button onclick =toggleHeatmap（）>切换热图< / button> < button onclick =changeGradient（）>更改渐变< /按钮> < button onclick =changeRadius（）>更改半径< / button> <按钮onclick =changeOpacity（）>更改不透明度< /按钮> < / DIV> < div id =map>< / div>

异步延迟属性。应该是：

< script src =maps.googleapis/maps/api/js?libraries = visualization& callback = initMapdefer async>< / script>

之后，它可以工作，但地图的中心不在数据所在的位置（以及热图

html,body { height: 100%;宽度：100％;保证金：0; padding: 0;}#map { height: 100%; width: 100%;}#floating-panel { position: absolute;顶部：10px;左：25％; z-index：5; background-color：#fff;填充：5px;边界：1px固体＃999; text-align：center; font-family：'Roboto'，'sans-serif'; line-height：30px; padding-left: 10px;}#floating-panel { background-color: #fff;边界：1px固体＃999;左：25％;填充：5px;位置：绝对;顶部：10px; z-index: 5;}

<script src=\"maps.googleapis/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>

I am trying to display heatmap. But it is not displaying my own data. But it displays google example data found in developers.google/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 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) ]; } </script> <script src="maps.googleapis/maps/api/js?libraries=visualization&callback=initMap"></script>

<style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 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; } </style>

<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 are missing the async defer properties in the Google Maps Javascript API v3 include. Should be:

<script src="maps.googleapis/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="maps.googleapis/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>