JSFiddle - React, Tailwind, and code Playground

by Jq7LxKdg

HTML

<div id="map"></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: 100%;
}

JavaScript

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

///////////////////////////////////////////////////////////////////////
// 変数設定
///////////////////////////////////////////////////////////////////////
var Yucho = {
    map:{},
    markerArr:[],
		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();
	
};

///////////////////////////////////////////////////////////////////////
// googleMaps 初期設定
///////////////////////////////////////////////////////////////////////
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.getJson();
		Yucho.createMarker();
};
 
///////////////////////////////////////////////////////////////////////
// JSON読み込み
///////////////////////////////////////////////////////////////////////
Yucho.getJson = function(){

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

///////////////////////////////////////////////////////////////////////
// マーカー作成
///////////////////////////////////////////////////////////////////////
Yucho.createMarker = function() {
	var infoWindow;
	Yucho.markerArr = [];
	if(Array.isArray(Yucho.jsonData.jsonDataList)){
		Yucho.jsonData.jsonDataList.forEach(function (place) {
					var latlng = new...