JSFiddle - React, Tailwind, and code Playground

HTML

<div id="labels-control" class="map-control">
  <input type="checkbox" name="toggle-lables" id="toggle-lables" class="selector-control">
  <label for="toggle-lables">Show labels</label>
  <br/>
  <input type="checkbox" name="toggle-clutter" id="toggle-clutter" class="selector-control">
  <label for="toggle-clutter">Full labels</label>
  <br/>
  <input type="checkbox" name="toggle-mainroads" id="toggle-mainroads" class="selector-control">
  <label for="toggle-mainroads">Main roads</label>
</div>
<div id="map"></div>

<!-- Replace the value of the key parameter with your own API key. -->

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=&v=weekly&channel=2"
      async
    ></script>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.map-control {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
  font-family: 'Roboto','sans-serif';
  margin: 10px;
  padding-right: 5px;
  /* Hide the control initially, to prevent it from appearing
     before the map loads. */
  display: none;
}
/* Display the control once it is inside the map. */
#map .map-control { display: block; }

.selector-control {
  font-size: 14px;
  line-height: 30px;
  vertical-align: middle;
}

JavaScript

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.8, lng: -74.0},
    zoom: 18,
    mapTypeId: 'satellite', 
    mapTypeControl: false
  });
  map.setTilt(45);
  map.setOptions({styles: styles.minimal});

  // Add controls to the map, allowing users to hide/show features.
  //var styleControl = document.getElementById('style-selector-control');
  //map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl);
  
  var labelsControl = document.getElementById('labels-control');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(labelsControl);
  
  
  function toggleLabels(){
    if (document.getElementById('toggle-lables').checked){
    	map.setMapTypeId('hybrid');
    }else{
    	map.setMapTypeId('satellite');
    }
  }
  
  function toggleClutter(){
    if (document.getElementById('toggle-clutter').checked){
    	map.setOptions({styles: styles.default});
      document.getElementById('toggle-mainroads').checked = true;
    }else{
    	toggleMainroads();
    }
  }
  
  function toggleMainroads(){
    if (document.getElementById('toggle-mainroads').checked){
    	map.setOptions({styles: styles.minwgrid});
    }else{
    	map.setOptions({styles: styles.minimal});
    }
    document.getElementById('toggle-clutter').checked = false;
  }
 
  
  document.getElementById('toggle-lables').addEventListener('click', function() {
  	toggleLabels();
  });
  
  document.getElementById('toggle-clutter').addEventListener('click', function() {
    toggleClutter();
  });
  
  document.getElementById('toggle-mainroads').addEventListener('click', function() {
    toggleMainroads();
  });
  
  
  document.onkeyup = function(e) {
  	if (e.ctrlKey && e.which == 66) {
  		var cbx = document.getElementById('toggle-lables'); 
      cbx.checked = !cbx.checked;
      toggleLabels();
    }
  }
  
}

var styles = {
  default: null,
  hideclutter: [
    {featureType: 'poi.business',				stylers: [{visibility:...