JSFiddle - React, Tailwind, and code Playground

by Jq7LxKdg

HTML

<div id="map"></div>
<div id="status_num"></div>
 <script async defer  src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 80%;
}

JavaScript

/////////////////////////////////////////////////////////
//参考先URL：http://blog.aquaring.co.jp/1328
/////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////
// 変数設定
///////////////////////////////////////////////////////////////////////
var Yucho = {
    map:{},
    markerArr:[],
		markerClusterer:{},
		markerAddress:[],
    rectangleArrLatLng:[],
    rectangleArrObj:[],
    rectangleArrData:[],
    gridRow:10,
    gridCol:10,
    defLat:35.685842,
    defLng:139.757850,
    defZoom:10,
		defminZoom:10,
    bounds:{},
    jsonData:[],
    boundsData:{},
};

///////////////////////////////////////////////////////////////////////
// 初期化
///////////////////////////////////////////////////////////////////////
Yucho.initMap = function(){
     
    // googleMaps 初期設定
    Yucho.gMapInit();
	
};

///////////////////////////////////////////////////////////////////////
// 現在地が取得できなかったらデフォルト表示
///////////////////////////////////////////////////////////////////////
Yucho.gMapInit = function(){
	Yucho.map = new google.maps.Map(document.getElementById('map'), {
	center: {
		lat: Yucho.defLat, 
		lng: Yucho.defLng
	},
		zoom: Yucho.defZoom,
		minZoom: Yucho.defminZoom
	});
	
	Yucho.gMapSetIdle();
}
 
///////////////////////////////////////////////////////////////////////
// JSON読み込み
///////////////////////////////////////////////////////////////////////
Yucho.getJson = function(){

		Yucho.jsonData = {
    	jsonDataList :[
      	{lat:35.461945,lng:139.584231},
      	{lat:35.461945,lng:139.584231}
      ]};
      
      Yucho.createMarker();
};

///////////////////////////////////////////////////////////////////////
// マーカー作成
///////////////////////////////////////////////////////////////////////
Yucho.createMarker = function() {
	//ajaxで取得したjsonが配列だったら
	if(Array.isArray(Yucho.jsonData.jsonDataList)){
		var infoWindow = new google.maps.InfoWindow();
		var options_markerclusterer = {
			gridSize:...