I am currently working on a GIS project where I aim to develop a hotspot crime mapping feature using Google Heatmap from the Google Maps API. I have a large dataset of crime locations (including latitude and longitude) stored in a MySQL database. While exploring the Google Maps API documentation, I came across an example on creating Heatmaps using the function getPoints(), but the LatLng values were hardcoded and not retrieved from a database. Is there a way to dynamically load LatLng values from an SQL database and convert them into a new google.maps.LatLng array?
Below is a snippet of my Heatmap 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
});
}
// Other heatmap functions omitted for brevity
// This is where I intend to load LatLng values from a database
function getPoints() {
return [
new google.maps.LatLng(40.761916,-73.9228569),
new google.maps.LatLng(42.35047,-71.07613),
// More LatLng values to be dynamically loaded from the database
]
}
</script>