JSFiddle - React, Tailwind, and code Playground

by Besart Bytyqi

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>
<div class="nav">
    <form>
        <label for="parking">Parking</label>
        <input type="checkbox" id="parking" value="parking">
        <br>
        <label for="academic">Academic</label>
        <input type="checkbox" id="academic" value="academic">
        <br>
        <label for="residence">Residence</label>
        <input type="checkbox" id="residence" value="residence">
    </form>
</div>
<div id="map"></div>

CSS

body, html, #map {
    height: 100%;
    margin: 0;
}

JavaScript

$(document).ready(function () {
       var mapData = {
           "type": "FeatureCollection",
               "features": [{
               "type": "Feature",
                   "properties": {
                   "title": "Parking Lot 1",
                       "type": "parking",
                       "description": ""
               },
                   "geometry": {
                   "point": [39.298211, -70.439326],
                       "polygon": [
                       [39.298038, -70.439311],
                       [39.29804, -70.439267],
                       [39.298115, -70.439177],
                       [39.298137, -70.439177],
                       [39.298338, -70.438986],
                       [39.298472, -70.439384],
                       [39.298165, -70.439604],
                       [39.298038, -70.439311]
                   ]
               }
           },

           {
               "type": "Feature",
                   "properties": {
                   "title": "academic 1",
                       "type": "aademic",
                       "description": ""
               },
                   "geometry": {
                   "point": [39.296499, -70.435279],
                       "polygon": [
                       [39.29657, -70.434978],
                       [39.296466, -70.434965],
                       [39.296466, -70.435131],
                       [39.296412, -70.435129],
                       [39.296404, -70.435598],
                       [39.296537, -70.435606],
                       [39.296559, -70.435589],
                       [39.296563, -70.435422],
                       [39.296541, -70.435417],
                       [39.296542, -70.435378],
                       [39.296563, -70.435375]
                   ]
               }
           },

           {
               "type": "Feature",
                   "properties": {
                   "title": "residence 1",
                       "type": "residence",
     ...