JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<div id="map_canvas" style="width: 100%; height: 600px;"></div>

CSS

#cd-zoom-in, #cd-zoom-out {
  height: 32px;
  width: 32px;
  cursor: pointer;
  margin-left: 10px;
  background-color: rgba(211, 104, 104, 0.9);
  background-repeat: no-repeat;
  background-size: 32px 64px;
  background-image: url("http://codyhouse.co/demo/custom-google-map/img/cd-icon-controller.svg");
}
.no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover {
  background-color: #d36868;
}

JavaScript

var infowindow = null;
    $(document).ready(function () { initialize();  });

    function initialize() {
        
        
var stylez = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { saturation: -100 } // <-- THIS
      ]
    }
];

        var centerMap = new google.maps.LatLng(-38.135767, 176.249013);
        var myOptions = {
            zoom: 14,
            center: centerMap,            
             mapTypeControlOptions: {
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
    }
            
          
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });    
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');

        setMarkers(map, sites);
	    infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });
       
    }



    var sites = [
        ['Malones Motel', -38.152354, 176.253558, 1, '<div style="padding:5px;width:240px;line-height:21px;"><strong>Malones Motel</strong> <br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis lacus, posuere sit amet tellus in, lacinia consequat mi. Vivamus ullamcorper molestie bibendum.<br /> <br /><a href="sdfsdf">Find Out More</a></div>'],
	
	['Tuscany Villas', -38.149263, 176.253822, 2, '<div style="padding:5px;width:240px;line-height:21px;"><strong>Tuscany Villas</strong> <br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis lacus, posuere sit amet tellus in, lacinia consequat mi. Vivamus ullamcorper molestie bibendum.<br /> <br /><a href="sdfsdf">Find Out More</a></div>'],
        
      ['Apollo Hotel Rotorua', -38.159784, 176.256338, 3, '<div style="padding:5px;width:240px;line-height:21px;"><strong>Apollo Hotel Rotorua</strong> <br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis...