JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=&amp;v=3.0&amp;sensor=true&amp;language=ee&amp;dummy=dummy.js"></script>
<section >
  <div class="container center-block">
    <div class="row">
     
        <div id="map_canvas"></div>
        <div id="map_filters">
          <input type="checkbox" class="marker_filter" name="Option 1" value="option1" id="option1" checked/>
          <label for="option1">1</label>
          <input type="checkbox" class="marker_filter" name="Option 2" value="option2" id="option2" checked/>
           <label for="option2">2</label>
          <input type="checkbox" class="marker_filter" name="Option 3" value="option3" id="option3" checked/>
           <label for="option3">3</label>
        </div>
     
    </div>
  </div>
</section>

CSS

.map_body {
  border: 2px solid #004165;
  background: #004165;
  color: #fff;
}

.map_body p {
  font-size: 1.2em;
  line-height: normal;
  margin-top: 0;
}

.map_body h2 {
  margin-bottom: 0;
}

#map_canvas {
  float: left;
  width: 100%;
  height: 250px;
}

#details {
  float: left;
  width: 25%;
  padding: 20px;
}

#map_filters {
  float: left;
  width: 100%;
  background: #3089ef;
  border-top: 1px solid #fff;
  padding: 20px;
}

JavaScript

var gmarkers1 = [];
            var markers1 = [];

            // Our markers
            markers1 = [
              ['0', 'Title', 52.4357808, 4.991315699999973, ['option3', 'option 2']],
              ['1', 'Title', 52.4357808, 4.981315699999973, ['option1', 'option 2']],
              ['2', 'Title', 52.4555687, 5.039231599999994, ['option2']],
              ['3', 'Title', 52.4555687, 5.029231599999994, ['option1', 'option 3']],
            ];

            /**
             * Function to init map
             */

            function initialize() {
              var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
              var bounds = new google.maps.LatLngBounds();
              var mapOptions = {
                zoom: 12,
                center: center,
                disableDefaultUI: true,
                scrollwheel: false,
                zoomControl: true,
                zoomControlOptions: {
                  position: google.maps.ControlPosition.LEFT_CENTER
                },
                mapTypeId: google.maps.MapTypeId.TERRAIN,
                styles: [{
                  "featureType": "road",
                  "elementType": "geometry",
                  "stylers": [{
                    "lightness": 100
                  }, {
                    "visibility": "simplified"
                  }]
                }, {
                  "featureType": "water",
                  "elementType": "geometry",
                  "stylers": [{
                    "visibility": "on"
                  }, {
                    "color": "#C6E2FF"
                  }]
                }, {
                  "featureType": "poi",
                  "elementType": "geometry.fill",
                  "stylers": [{
                    "color": "#C5E3BF"
                  }]
                }, {
                  "featureType": "road",
                  "elementType": "geometry.fill",
                  "stylers": [{
                    "color":...