JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<!-- Map -->
                    <div style="position:relative;">
                       <div class="mapText">
                            <p>10 MIN WALKING RADIUS</p>
                        </div>
                        <div id="map"></div>
                    </div>
                    <!-- Map End -->

CSS

map {
    width: 100%;
    height: 900px;
}

.legends {
    margin-top: 25px;
}

.square {
    width: 21px; 
    height: 20px;
    margin-right: 20px;
}

.category div,
.category p {
    display: inline-block;
    vertical-align: text-top;
}

/* Categories */
.categoryWGeorgia {
    background-color: #89a2a3;
}

.square.categoryProperties {
    background-color: #3f5265;
}

.categoryLandmarks {
    background-color: #96915b;
}

.categoryRestaurants {
    background-color: #f36f21;
}

.categoryCafes {
  background-color: #fcaf17;
}

.categoryTrainStation {
    background-color: #0072bc;
}

.categoryBusStops {
    background-color: #56c5d0;
}

.categoryBikePath {
    background-color: #a6ce39;
}

.categoryHotels {
    background-color: #9e76b4;
}

#imageTerrace {
    width: 100%;
}

.featureList {
    list-style-type: none;
    padding-left: 0;
}

.featureList li {
    margin-bottom: 20px;
    color: #6d6e71;
}

#about .headline p,
.headline.fontAbout p {
    margin-bottom: 15px;
    font-family: 'Aaux ProThin';
    font-size: 36px;
}

#location .headline p {
    margin-bottom: 15px;
    font-family: 'Aaux ProLight';
    font-size: 25px;
}

.logoImDiv {
    max-width: 261px;
    height: auto;
}

.boxMap {
    background-color: orange;
/*
    width: 200px;
    height: 250px;
*/
    color: white;
}


.gm-style-iw {
    width: 210px !important;
    top: 43px !important;
    left: 7px !important;
    z-index: 999;
}

#iw-container {
    margin-bottom: 10px;
}

#iw-container .iw-title {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 22px;
    font-weight: 400;
    padding: 10px;
    background-color: #48b5e9;
    color: white;
    margin: 0;
    border-radius: 2px 2px 0 0;
}

#iw-container .iw-content {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    margin-right: 1px;
    padding: 15px 5px 20px 15px;
    max-height: 140px;
    overflow-y: auto;
    overflow-x: hidden;
}

.iw-content img {
    float: right;
    margin: 0 5px 5px...

JavaScript

jQuery(document).ready(function($) {
    
    (function($) {
        // Google Maps
        var locations = [
            ['', 49.282281, -123.118606, 1, 'images/401.png'],
            ['', 49.2772545,-123.1194288, 1, 'images/MapText.png'],
            ['<div class="boxMap"><img src="images/ExistingSouthTower.png"></div>', 49.281377, -123.114836, 1, 'images/401WestGeorgia.png'],
            ['<div class="boxMap"><img src="images/Burrard.png"></div>', 49.283006, -123.122873, 2, 'images/oxfordProperties.png'],
            ['<div class="boxMap"><img src="images/MarineBuilding.png"></div>', 49.287462, -123.117046, 3, 'images/oxfordProperties.png'],
            ['<div class="boxMap"><img src="images/MnpTower.png"></div>', 49.2876, -123.1171, 4, 'images/oxfordProperties.png'],
            ['<div class="boxMap"><img src="images/GuinnessTower.png"></div>', 49.287733, -123.118284, 5, 'images/oxfordProperties.png'],
            ['<div class="boxMap"><img src="images/OceanicPlaza.png"></div>', 49.287423, -123.119052, 6, 'images/oxfordProperties.png'],
            ['<div class="boxMap"><img src="images/Melville.png"></div>', 49.287115, -123.122623, 7, 'images/oxfordProperties.png'],
            ['<div class="boxMap"><img src="images/VancouverPublicLibrary.png"></div>', 49.279794, -123.1115670, 8, 'images/landmarks.png'],
            ['<div class="boxMap"><img src="images/QueenTheatre.png"></div>', 49.280333, -123.112548, 9, 'images/landmarks.png'],
            ['<div class="boxMap"><img src="images/TheOrpheum.png"></div>', 49.280081, -123.120416, 10, 'images/landmarks.png'],
            ['<div class="boxMap"><img src="images/BCPlace.png"></div>', 49.276750, -123.111999, 11, 'images/landmarks.png'],
            ['<div class="boxMap"><img src="images/RogersArena.png"></div>', 49.277836, -123.108823, 12, 'images/landmarks.png'],
            ['<div class="boxMap"><img src="images/HudsonBay.png"></div>', 49.283667, -123.116397, 13, 'images/landmarks.png'],
            ['<div...