JSFiddle - React, Tailwind, and code Playground

by cincodenada

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<link rel="stylesheet" href="http://xii.com.au/pubmap/css/willypubs.css">
<h1>Pubs</h1>
        <div class="subhead">
        <div class="tags">
            <ul>
            <li class="current"><label><input type="checkbox" name="filter" id="all"> All &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="craft-beer"> Craft Beer &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="beer-garden"> Beer Garden &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="night-club"> Night Club &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="quiz-night"> Quiz Night &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="steak-night"> Steak Night &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="parma-night"> Parma Night &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="tab"> TAB &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="live-sport"> Live Sport &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="live-music"> Live Music</label></li>
        </ul>
         </div>
        </div>
    </header>
<div id="googlemap"></div>

JavaScript

var infowindow = null;
    $(document).ready(function () { initialize();  });
    function initialize() {
    var centerMap = new google.maps.LatLng(-37.854000, 144.900432);
        var myOptions = {
            zoom: 14,
            minZoom: 12,
            maxZoom: 20,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles:[{
                featureType:"poi",
                elementType:"labels",
                stylers:[{
                visibility:"off" /* Hide POI */
                }]
            }]
        }
       var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);
            setMarkers(map, sites);
            google.maps.event.addDomListener(window, "resize", function() {
       var center = map.getCenter();
           google.maps.event.trigger(map, "resize");
           map.setCenter(center); 
        });
        infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });
    }

    var sites = [
          ['Customs House Hotel', -37.86314,144.904012, 9, '<a class="orange" href="#">Customs House Hotel</a><p>Williamstown</p><p><img src="img/stars_25.png" /></p>'],
          ['Juntions Beer Hall & Wine Bar', -37.843199,144.883992, 1, '<a class="orange" href="#">Juntions Beer Hall & Wine Bar</a><p>Newport</p><p><img src="img/stars_45.png" /></p>'],
          ['Morning Star Hotel', -37.86426,144.899121, 11, '<a class="orange" href="#">Morning Star Hotel</a><p>Williamstown</p><p><img src="img/stars_35.png" /></p>'],
          ['Pirates Tavern', -37.862818,144.907381, 8, '<a class="orange" href="#">Pirates Tavern</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>'],
          ['Prince Albert Hotel', -37.853337,144.896165, 2, '<a class="orange" href="#">Prince Albert Hotel</a><p>Williamstown</p><p><img src="img/stars_4.png" /></p>'],
          ['Rifle Club Hotel', -37.858244,144.888843, 4, '<a class="orange" href="#">Rifle Club...