热图数据未显示

时间:2016-06-13 18:11:00

标签: javascript google-maps-api-3

我正在尝试显示热图。但它没有显示我自己的数据。但它显示了https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap中的Google示例数据 但我想知道为什么以下代码数据不起作用。有人能说出为什么会这样。

<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="https://maps.googleapis.com/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>

1 个答案:

答案 0 :(得分:0)

您缺少Google Maps Javascript API v3 include中的async defer属性。应该是:

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

之后它可以工作,但是地图的中心不是数据的位置(并且很难在地图或卫星图块上看到热图)。

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>