Load Heatmap LatLng Coordinates Google Maps API from MySQL database

[Ulil Albab Rabbani]

I have project GIS. I want to create a hotspot crime mapping using Google Heatmap from Google Maps API. I have bunch of data of set crime location (including latitude and longitude) on MySQL database. I have read on Google Maps API Doc example: https://developers.google.com/maps/documentation/javascript/heatmaplayer.

There is an example creating Heatmaps using function getPoints(), but with LatLng hardcoded, not from a database. Any possible way to load LatLng from SQL database and array to new google.maps.LatLng?

This is my Heatmap Google Maps API source code:

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

    <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>

    <script>

      var map, heatmap;

      function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {

          zoom: 2,

          center: {lat: 51.508530, lng: -0.076132},

          mapTypeId: 'satellite'

        });

        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);

      }




// This is the LatLng I meant, any possible way to load these from a database?

      function getPoints() {

        return [

          new google.maps.LatLng(40.761916,-73.9228569),

          new google.maps.LatLng(42.35047,-71.07613),

          new google.maps.LatLng(42.3456382751,-71.0715713501)

        ]

      }

    </script>

[Barry Hunter]

// This is the LatLng I meant, any possible way to load these from a database?

      function getPoints() {

        return [

          new google.maps.LatLng(40.761916,-73.9228569),

          new google.maps.LatLng(42.35047,-71.07613),

          new google.maps.LatLng(42.3456382751,-71.0715713501)

        ]

      }

    </script

Well perhaps the 'simplest', is just to have this block of codes generated by server side code. 

Like PHP. Have it connect to database, and write out all the lines. Ie the HTML (including JS) of the actual map page, is itself dynamically generated. 

Otherwise, could have PHP (or similar) output some sort of intermediate file. Eg a JSON file. 

The 'map' page then downloads the "data" as a separate HTTP request. AJAX style. 

Its not excactly the same, but the concept is discussed here:

https://developers.google.com/maps/documentation/javascript/mysql-to-maps

(in that case its creating seperate placemarks, in your case you store up the points, and pass it to the HeatMap.