JSFiddle - React, Tailwind, and code Playground
by grant
HTML
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
CSS
html, body, #map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
var map, pointarray, heatmap;
function initialize() {
var jsonArray = [];
var data = [{
"ycoord": -122.445368,
"xcoord": 37.782551,
"weight": 1
},
{
"ycoord": -122.444586,
"xcoord": 37.782745,
"weight": 2
},
{
"ycoord": -122.442815,
"xcoord": 37.782919,
"weight": 3
},
{
"ycoord": -122.443688,
"xcoord": 37.782842,
"weight": 4
},
{
"ycoord": -122.449888,
"xcoord": 37.782842,
"weight": 90
}
];
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
heatmap = new google.maps.visualization.HeatmapLayer({
data: []
});
heatmap.setMap(map);
heatmap.setMap(null);
/* $.ajax({
url : "/heatmapdata",
type : "GET",
data : "",
contentType : "application/json; charset=utf-8",
dataType : "json",
success : function(data) { */
$.each(data, function (i, jsondata) {
var jsonObject = {};
jsonObject.xcoord = jsondata.xcoord;
jsonObject.ycoord = jsondata.ycoord;
jsonObject.weight = jsondata.weight;
jsonArray.push(new google.maps.LatLng(jsonObject.xcoord,jsonObject.ycoord))+jsonObject.weight;
});
var pointArray = new google.maps.MVCArray(jsonArray);
heatmap.setData(pointArray);
heatmap.setMap(map);
/* }
}); */
console.log(jsonArray.weight);
}
google.maps.event.addDomListener(window, 'load', initialize);