JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<label>Red </label><input type="checkbox" class="red" data-img="images/red.png">
<label>Blue </label><input type="checkbox" class="blue" data-img="images/blue.png">
<label>Green </label><input type="checkbox" class="green" data-img="images/green.png">

JavaScript

$(document).ready(function(){
    plotPoints();
    
    $('input').on('change', function(){
        plotPoints();
    });
});

function plotPoints() {
    // removing points from map
    
    var points = ['images/red.png', 'images/blue.png', 'images/green.png'];
    
    var checked = $('input:checkbox:checked').map(function () {
      return $(this).attr('data-img');
    }).get();
    
    console.log(checked);
    
    // loop through points
    
    for(var i =0; i < points.length; i++) {
        // IN YOUR APP:
       
        // if ($.inArray(points[i].color, checked) > -1) {
        if($.inArray(points[i], checked) > -1) {
            console.log(points[i]);
            
            // IN YOUR APP:
            
            /* 
            var marker = new google.maps.Marker({
                position: points[i].position,
                map: map,
                icon: points[i].color,
                title: points[i].title
               });
            } 
            */
        }
    }
}