JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=weather,visualization"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/infobox-module.min.js"></script>
<div id="map" style="width: 650px; height: 450px"></div>


<div id="controls">
Rooster <input id="layer1_checkbox" type="checkbox" checked />
Quail <input id="layer2_checkbox" type="checkbox" checked />
Hen <input id="layer3_checkbox" type="checkbox" checked />
</div>

<div id="url"></div>
<div id="layer"></div>

JavaScript

var 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 iconBase = 'images/icons/';
		var icons = {
			Hen: {
				icon: iconBase + 'hen.png'
			},
			Miss: {
				icon: iconBase + 'shell.png'
			},
			Rooster: {
				icon: iconBase + 'rooster.png'
			},
			Grape: {
				icon: iconBase + 'grape.png'
			},
			Corn: {
				icon: iconBase + 'corn.png'
			},
			Apple: {
				icon: iconBase + 'apple.png'
			},
			Quail: {
				icon: iconBase + 'quail.png'
			}
		};
let api = 'https://maps.googleapis.com/maps/api/js?libraries=visualization';
let url = 'https://stackoverflow.com/questions/16201066/google-maps-from-json-file';
//document.getElementById("url").innerHTML = url;


  
var map, pointarray, heatmap1, heatmap2;
var layers = {};

function loadData() {
/*  var layers = [];
  $.ajax({
    url: 'test.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...