JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/data.json"></script>
<script src="http://pastebin.com/raw.php?i=g7NT9bMJ"></script>
<h3></h3>
<p>The icon in real size: <img src="http://www.primavera-online-middle-school.com/wp-content/uploads/2013/03/AIMS_MS_Spring_2013_Slider_v2-66x66.png"></p>
    <div id="map-container"><div id="map"></div></div>

CSS

body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }

      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }

      #map {
        width: 600px;
        height: 400px;
      }

JavaScript

var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
var styles = [
    {
        url: 'http://www.primavera-online-middle-school.com/wp-content/uploads/2013/03/AIMS_MS_Spring_2013_Slider_v2-66x66.png',
        textColor: '#ff9999',
        textSize: 18,
        width: 33,
        height: 33,
    }
];


// Calculator function to determine which style to use (I only have one)
var calculator = function (markers, iconstyles){
    return{ text: markers.length.toString(), index:1};
};

// Set Options
var clusterOptions = {
    title: 'Cluster Title',
    enableRetinaIcons: true,
    styles: styles,
    calculator: calculator
}

        
        var markerCluster = new MarkerClusterer(map, markers, clusterOptions);