JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map" style="width: 400px; height: 300px;"></div> 

    <label>blue</label><input type="checkbox" value="Show Group 1" onclick="displayMarkers(this,1);">
    <label>green</label><input type="checkbox" value="Show Group 2" onclick="displayMarkers(this, 2);">

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var beaches = [
      ['Bondi Beach', -33.890542, 151.274856, 1], //category 1
      ['Coogee Beach', -33.923036, 151.259052, 1],  //category 1
      ['Cronulla Beach', -34.028249, 151.157507, 2],  //category 2
      ['Manly Beach', -33.800101, 151.287478, 2],   //category 2 
      ['Maroubra Beach', -33.950198, 151.259302, 2]   //category 2
    ];
    
    var icons = ["",
    "http://maps.google.com/mapfiles/ms/micons/blue.png",
    "http://maps.google.com/mapfiles/ms/micons/green.png"];

    var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10,
       center: new google.maps.LatLng(-33.88, 151.28),
       mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];

    var i, newMarker;

    for (i = 0; i < beaches.length; i++) {
      newMarker = new google.maps.Marker({
      position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
      map: map,
      icon: icons[beaches[i][3]],
      title: beaches[i][0]
    });

    newMarker.category = beaches[i][3];
    newMarker.setVisible(false);

    markers.push(newMarker);
    }

     function displayMarkers(obj,category) {
         var i;

         for (i = 0; i < markers.length; i++)
         {   
                 if (markers[i].category === category) {
                     if ($(obj).is(":checked")) {

                         markers[i].setVisible(true);
                     } else {
                         markers[i].setVisible(false);    
                     }
                 } 

             }


     }