[Google Maps API v3] 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>




-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at https://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.