JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
    <div id="sidebar" class="clearfix">
        <div id="header">
            <h2>Filtering Options:</h2>
        </div>
        <div id="accordion">
        
            <h3><a href="#">Screen Category:</a></h3>
            
        <div>
            <ul class="filters">
                <li><img src="http://project.emrullahcicek.nl/Google%20Maps/Spreadsheet/img/icons/filters/new/communicate.png" title="" alt="" id="categoryAdvertising" /></li>
                <li><img src="http://project.emrullahcicek.nl/Google%20Maps/Spreadsheet/img/icons/filters/new/info.png" title="" alt="" id="categoryInformation" /></li>
                <li><img src="http://project.emrullahcicek.nl/Google%20Maps/Spreadsheet/img/icons/filters/new/communicate.png" title="" alt="" id="categoryACA" /></li>
                <li><img src="img/icons/filters/new/entertainment.png" title="" alt="" id="categoryEntertainment" /></li>
                <li><img src="img/icons/filters/new/communicate.png" title="" alt="" id="categoryInfluencing" /></li>
                <li><img src="img/icons/filters/new/communicate.png" title="" alt="" id="categoryICE" /></li>
                <li><img src="img/icons/filters/new/communicate.png" title="" alt="" id="categoryCommunication" /></li>
                <li><img src="img/icons/filters/new/communicate.png" title="" alt="" id="categoryParticipation" /></li>
            </ul>
        </div>
        
            <h3><a href="#">Screen Type:</a></h3>
            
        <div>
            <ul class="filters">
                <li><img...

CSS

/* CSS Document */

/* CSS Reset */
* {
  margin: 0;
  padding: 0;
}

html, body { 
  min-height: 100%;
  height: 100%;
}

body { 
  margin: 0; 
  padding: 0; 
  font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
  background-color: #a5bfdd;
}

#sidebar {
width: 220px;
min-height: 100%;
background-color: #EDEDED;
border-right: 1px solid #000000;
float: left;
display:none;
}

#header {
  width: 100%;
  height: 60px;
  background-color: #343434;
}

#header h2 {
  font-size: 18px;
  padding: 5px;
  text-align: center;
  color: #FFF;
  line-height: 42px;
}

#header p {
  text-align: center;
}

#header a {
 text-decoration:none;
 color: #FEFEFE;
}

#accordion a {
 font-size: 13px;
}

#accordion h3{
  margin: 5px 5px 0 5px !important;
}

.ui-accordion-content {
  margin: 0 5px 5px 5px !important;  
  top: 0 !important;
}

#accordion ul {

}

#accordion li {
  list-style: none;
  float: left;
}

.filters li {
  font-size: 11px;
  margin: 6px 3px 6px 3px;
}

.filters li img {
opacity:0.4;
filter:alpha(opacity=40);
}

#kaart { 
  width: 100%;
  height: 100%;
  float: right;
}

.infoscherm {

}

.infoscherm h3 {
 font-size: 12px;
 margin-bottom: 3px;
 margin-top: 3px;
}

.infoscherm p {
  font-size: 11px;
  font-style: italic;
  line-height: 12px;
  padding: 1px;
  margin-bottom: 8px;
}

.message {
  font-size: 12px;
}

.message-title {
  font-size: 14px;
}

/* Checkbox Styling */

/* full clearfix */
    /* add to floating elements which shall clear floating after themselves */ 
    * html .clearfix {
        height: 1%; /* IE5-6 */
        }
    *+html .clearfix {
        display: inline-block; /* IE7not8 */
        }
    .clearfix:after { /* FF, IE8, O, S, etc. */
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }

JavaScript

// Variabelen
var kaart;
var cm_openInfowindow;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];

//
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
var buttonState = false;


// Filter Booleans
var categoryAdvertising = false;
var categoryInformArtation = false;
var categoryACA = false;
var categoryEntertainment = false;
var categoryInfluencing = false;
var categoryICE = false;
var categoryCommunication = false;
var categoryParticipation = false;


// Change these parameters to customize map
var param_wsId = "od6";
var param_ssKey = "0Amzr6LoYHuB1dHdIY1VaUUhwcm5XQ3IwX01tb3ZvYXc";
var param_titleColumn = "title";
var param_screenCategory = "categories";
var param_screenType = "screentype";
var param_publicSpace = "publicspace";
var param_screenInteraction = "interaction";
var param_descriptionColumn = "description";
var param_screenAddress = "address";
var param_latColumn = "latitude";
var param_lngColumn = "longtitude";

//Functies
/* $(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('<p class="message">Some Basic Info + Instructions!</p>')
        .dialog({
            autoOpen: true,
            modal: true,
            title: '<p class="message-title">Welcome</p>'
        });
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
}); */

$(function() {
    $(".filters img").click(function () {
        var id = ($(this).attr('id'));
        var opacity = $(this).css("opacity");
        if (opacity == 1) {
            opacity = 0.2;
            eval(id + "=false");
        } else {
            opacity = 1;
            eval(id + "=true");
        }
        $(this).fadeTo("slow", opacity);
        alert(id);
        clearOverlays();
        filterMarker();
        MarkerClusterer.repaint();
    });
});

//laden van de google maps kaart
function loadMap() {  
  var mapOptions = {
    zoom: 8,  //zoomlevel
    minZoom: 8, //minimal zoomlevel
   ...