JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=weather,visualization"></script>
<div id="map" style="width: 650px; height: 450px"></div>
<div><h4>trying to put the heatmaps in a loop</h4></div>
<div id="layer"></div>

JavaScript

data = {
	"markers": [
		{
		"name": "Kerner",
		"layer":1,
		"weight": 4, 
		"icon": "rooster",
		"lat": 44.2331472663154,
		"lng":  -116.87813299010107
		},
		{
		"name": "Sweet",
		"layer":1,
		"weight": 2,
		"icon": "rooster",
		"lat": 44.23708302599145, 
		"lng": -116.91160695760422
		},
		{
		"name": "Snake",
		"layer":2,
		"weight": 12,
		"icon": "hen",
		"lat": 44.23094309064884, 
		"lng": -116.96188777430531
		},
    {
		"name": "Confl",
		"layer":3,
		"weight": 20,
		"icon": "quail",
		"lat": 44.23654309064884, 
		"lng": -116.96358777430531
		}
	]
};
var map, pointarray, heatmap1, heatmap2;
var layers = {};
function loadData() {
/*  var layers = [];
  $.ajax({
    url: 'j.json',
    async: false,
    dataType: 'json',
    success: function(data) {
    */
$.each(data.markers, function (i, jsondata) {
 
       var jsonObject = {};
       
	jsonObject.lat = jsondata.lat;
	jsonObject.lng = jsondata.lng;
	jsonObject.weight = jsondata.weight;
  jsonObject.layer = jsondata.layer;
  
       if (layers[jsonObject.layer]===undefined) {
			layers[jsonObject.layer] = [];
		}
        
        layers[jsonObject.layer].push({
          location: new google.maps.LatLng(jsonObject.lat, jsonObject.lng),
          weight: jsonObject.weight,
          layer: jsonObject.layer
        });
/*      }
    }
  });
 */

  return layers;
})//each

} //function

loadData(data);

$.each(layers, function (i, value) {
	
       //console.log(value);
	pointArray = new google.maps.MVCArray(value);
	//console.log(pointArray)

});

$.each(pointArray, function (i, value) {
	
       heatmap = new google.maps.visualization.HeatmapLayer(value);
	console.log(heatmap);

});
function initMap() {
 var mapOptions = {
           zoom: 13,
      //  center: new google.maps.LatLng(37.774546, -122.433523),
        center: new google.maps.LatLng(44.226546, -116.912523), 
        mapTypeId: google.maps.MapTypeId.SATELLITE
        };

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