JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;v=3&amp;ext=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="container">
    
    
    <div id="map_canvas"></div>
</div>

CSS

#container {
			margin: 0px;
        	padding: 0px;
		  }
      	  #map_canvas {
        	position: relative;
			height: 400px;
          	width: 400px;
		  }
		  #infowindow {
            visibility:hidden;
            height: 100px;
            width: 200px;
            overflow: auto;
            background:#fff;
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #999;
            border-right: 1px solid #999;
            box-shadow: 0 1px 1px #cccccc;
          }

JavaScript

jQuery( '#infowindow' ).hide();
        function initialize() {
	    var map_options = {
	        center: new google.maps.LatLng(35, -118),
	        zoom: 10,
			panControl: false,
    		zoomControl: true,
    		scaleControl: true,
			streetViewControl: false,
			mapTypeControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_TOP
            },
    		mapTypeControlOptions: {
      		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			}
	    };

	    map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push($('<div id="infowindow"/>')[0]);
	    var image = {
	        url: 'http://oi62.tinypic.com/zjbf9l.jpg',
	        scaledSize: new google.maps.Size(150, 80),
	        origin: new google.maps.Point(0, 0),
	        anchor: new google.maps.Point(75, 40),
	    };

	    var markers = [
	        ['Marker1', 38.576725, -121.493715, 1],
	        ['Marker2', 38.576, -121.493, 2],
	        ['Marker3', 38.577, -121.493, 3],
	        ['Marker4', 38.578, -121.493, 4],
	        ['Marker5', 38.579, -121.493, 5],
	        ['Marker6', 35.011263, -115.473376, 6],
	        ['Marker7', 33.941820, -118.408466, 7]
	    ];

	    var content = [
	        ['<div id="bodyContent">' + '<p>Text1</p>' + '</div>'],
	        ['<div id="bodyContent">' + '<p>Text2</p>' + '</div>'],
	        ['<div id="bodyContent">' + '<p>Text3</p>' + '</div>'],
	        ['<div id="bodyContent">' + '<p>Text4</p>' + '</div>'],
	        ['<div id="bodyContent">' + '<p>Text5</p>' + '</div>'],
	        ['<div id="bodyContent">' + '<p>Text6</p>' + '</div>'],
	        ['<div id="bodyContent">' + '<p>Text7</p>' + '</div>']
	    ];

        var clusterStyles = [{
	        url: 'http://oi62.tinypic.com/zjbf9l.jpg',
            height: 80,
            width: 150,
			textSize: 16,
			backgroundPosition: "-4 0"
        }];

        var mcOptions = {
	        gridSize: 30,
	       ...