JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.google.com/apis/gears     /gears_init.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>


     </head>
     <body>
     <div id="map" style="height: 500px; width: 500px;">
         </div>

   

 </script>
 </div>

CSS

body { font: normal 10pt Helvetica, Arial; }
     #map { width: 350px; height: 300px; border: 0px; padding: 0px; }

#map
{
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/></filter></svg>#g');
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);    
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}

JavaScript

var mapOpts = { mapTypeId: google.maps.MapTypeId.TERRAIN, zoom: 2, center:
    new google.maps.LatLng(20, 0) }; 
    var map = new google.maps.Map(document.getElementById("map"), mapOpts); 
    var infoWindow = new google.maps.InfoWindow(); 
   var markerBounds = new google.maps.LatLngBounds(); 
    var markerArray = []; 

   function makeMarker(options) { 
  var pushPin = new google.maps.Marker({ map: map }); 
  pushPin.setOptions(options); 
  google.maps.event.addListener(pushPin, "click", 
  function () { infoWindow.setOptions(options); 
  infoWindow.open(map, pushPin); });
  markerBounds.extend(options.position); 
  markerArray.push(pushPin);
  return pushPin; } google.maps.event.addListener(map, "click", 
  function () { infoWindow.close(); }); 

      makeMarker({ title: "Test1", position: new google.maps.LatLng(10, 10),
     content: "Content1",      icon: '' });
      makeMarker({ title: "Test2", position: new google.maps.LatLng(20, 20),
    content: "Content2",    icon: '' });
      makeMarker({ title: "Test3", position: new google.maps.LatLng(30, 30), 
   content: "Content3", icon: '' });