JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://shrt.tf/userfiles/1t"></script>
<div id="map-canvas"></div>

<div id="container">
    
    <input type="checkbox" name="bars" />Show bars <br/>
    <input type="checkbox" name="transportation" />Show transportation
    
</div>

CSS

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

#container{
    position:absolute;
    width:60%;
    padding:5px 0;
    background:rgba(255,255,255,.8);
    text-align:center;
    top:10px;
    left:50%;
    margin-left:-30%;
}

JavaScript

/***************************/
/* Just setting up the map */
/***************************/

var map = new GMaps({
    el: '#map-canvas',
    lat: 45.640981,
    lng: 25.587723
});

/***************************/






/*************************************************/
/* Define your markers, with Ajax if you want to */
/*************************************************/

// gMarkers -> Gmaps.js markers    |    realMarkers -> Google Maps markers
var realMarkers = {},
    gMarkers = {
        bars: [
            {lat:"45.640981",lng:"25.587723",infoWindow:{content:"Irish Pub"},icon:"http://shrt.tf/1v"},
            {lat:"45.645911",lng:"25.582753",infoWindow:{content:"Beer King"},icon:"http://shrt.tf/1v"}
        ],
        transportation: [
            {lat:"45.645981",lng:"25.590723",infoWindow:{content:"Subway"},icon:"http://shrt.tf/1w"},
            {lat:"45.640981",lng:"25.583723",infoWindow:{content:"Train"},icon:"http://shrt.tf/1w"},
            {lat:"45.636981",lng:"25.580723",infoWindow:{content:"Airport"},icon:"http://shrt.tf/1w"}
        ]
    };

/*************************************************/





/****************************************************/
/* Your onClick function (no ajax for this example) */
/****************************************************/

$("#container input[type='checkbox']").click(function() {
    var poi_type = $(this).attr('name');
    if ($(this).is(':checked')) 
        map.addMarkersOfType(poi_type);
    else 
        map.removeMarkersOfType(poi_type);
});

/****************************************************/





/*****************************/
/* Custom Gmaps.js functions */
/*****************************/

GMaps.prototype.addMarkersOfType = function (poi_type) {
    // clear markers of this type
    realMarkers[poi_type]=[];
    // for each Gmaps marker
    for(var i=0; i<gMarkers[poi_type].length; i++){
    	  // add the marker
        var marker = map.addMarker(gMarkers[poi_type][i]);
        // save it as real...