JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;.js"></script>
<input type="checkbox" checked value="parks">parks
<input type="checkbox" checked value="hotels">hotels
<input type="checkbox" checked value="shops">shops
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
    height:100%;
    margin:0;
    padding:0
}

JavaScript

function randLatLng(){
          return new google.maps.LatLng(((Math.random() * 17000 - 8500)/100),
                                        ((Math.random() * 36000 - 18000)/100));
      }
  function initialize() {
    var mapOptions = {
      zoom: 1,
      center: new google.maps.LatLng(0,0)
    };
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      var markerGroups=new google.maps.MVCObject();
      
      $(':checkbox').each(function(i,n){
         markerGroups.set(this.value,map);
         for(var i=0;i<50;++i){
            marker=new google.maps.Marker({
                position:randLatLng(),
                title:this.value,
                icon:'http://www.google.com/mapfiles/marker'+this.value.substring(0,1).toUpperCase()+'.png'});
            marker.bindTo('map',markerGroups,this.value);
         }
         
      }).on('click init',function(){markerGroups.set(this.value,(this.checked)?map:null)}).trigger('init');
    
    }


  google.maps.event.addDomListener(window, 'load', initialize);