JSFiddle - React, Tailwind, and code Playground

by mkdizajn

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="map_canvas"></div>

CSS

html, body, #map_canvas {
          height: 400px;
          width: 400px, 
          margin: 0px;
          padding: 10px
      }

JavaScript

function initialize() {
	    var map_options = {
	        center: new google.maps.LatLng(35, -118),
	        zoom: 10
	    }

	    map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

	    var image = {
	        url: 'http://oi59.tinypic.com/snmjj8.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://oi59.tinypic.com/snmjj8.jpg',
            height: 150,
            width: 80
        }];

        var mcOptions = {
	        gridSize: 20,
	        styles: clusterStyles,
	        maxZoom: 15
        };

	    var bounds = new google.maps.LatLngBounds();
	    var infoWindow = new google.maps.InfoWindow();
	    var gmarkers = [];
	    var marker, i;

	    for (i = 0; i < markers.length; i++) {
	        marker = new google.maps.Marker({
	            position: new google.maps.LatLng(markers[i][1], markers[i][2]),
	            map: map,
	            icon: image,
	            title: markers[i][0]
	            /*,
            	zIndex: markers[i][3] */
	        });
	       ...