JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://beta.sktspts.com/js/markerclusterer_packed.js"></script>
<div id="map_canvas"></div>

CSS

#map_canvas {
    width: 400px;
    height: 400px;
}

JavaScript

<script type="text/javascript"> 
 
function initialize() {
  var initialLatLng = new google.maps.LatLng(33.517872, -86.801102);
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: initialLatLng,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    panControl: false
  });
  var latlngbounds = new google.maps.LatLngBounds();
  var spots = [
      ['Faith', 33.517872, -86.801102],
      ['McWane Center', 33.514832, -86.807770],
      ['Warmup Spot', 33.511093, -86.799767],
      ['10 Story Parking Deck', 33.509953, -86.800797],
      ['Sloss Furnace', 33.521645, -86.788780],
      ['Shoe Factory', 33.508484, -86.810860],
      ['Social Security Bank', 33.516758, -86.822220],
      ['Ghetto Banks', 33.506691, -86.790787],
      ['University Walkway', 33.500172, -86.808922],
      ['Crooked Double Set', 33.503845, -86.785721],
      ['Avondale', 33.520023, -86.773491],
    ];
  var markers = [];
  for (var i = 0; i < spots.length; i++) {
    var spot = spots[i];
    var spotLatLng = new google.maps.LatLng(spot[1], spot[2]);
    var marker = new google.maps.Marker({
        position: spotLatLng,
        map: map,
        icon: 'http://beta.sktspts.com/img/map-pin.png',
        shadow: 'http://beta.sktspts.com/img/map-pin-shadow.png',
        title: spot[0]
    });
    markers.push(marker);
    latlngbounds.extend( spotLatLng );
  }
  map.fitBounds( latlngbounds );
  var markerCluster = new MarkerClusterer(map, markers, {maxZoom: 10});
}
 
google.maps.event.addDomListener(window, 'load', initialize);
    </script>