JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false&amp;.js"></script>
<div id="map_canvas" style="width: 800px; height: 600px;"></div>

<!-- ZONE ID's -->
<div id="zone_outter">
      <div id="zone_inner">
        <div id="z1"><div class="foo" style="background-color:#3299CC;"></div><span class="foo_words">Zone 1</span>
        </div>
        
        <div id="z2"><div class="foo" style="background-color:#FFCC00;"></div><span class="foo_words">Zone 2</span></div>
        
        
        <div id="z3"><div class="foo" style="background-color:#FF0000;"></div><span class="foo_words">Zone 3</span></div>
        
        
        <div id="z4"><div class="foo" style="background-color:#FFFFCC;"></div><span class="foo_words">Zone 4</span></div>
        
      </div>
    </div>
    <!-- END ZONE ID's -->

JavaScript

var map = null;
var markerArray = []; //create a global array to store markers
var locations = [

    
//====================== ZONE 1 MUSEUMS  ==========================
//THE MENIL COLLECTION    
    ['<a style="font-family: Arial"  href="http://www.mfah.org/" target="_blank">The Menil Collection</a><br><span style="font-size: 12px; font-family: Arial;">ADDRESS<br> Houston, TX 77006<br>(713) PHONE<br></span>', 29.737593,-95.398525, 1, 'http://www.conleym.com/map/icons/world.png'],

//ROTHKO CHAPEL    
    ['<a style="font-family: Arial"  href="http://www.mfah.org/" target="_blank">Rothko Chapel</a><br><span style="font-size: 12px; font-family: Arial;">ADDRESS<br> Houston, TX 77006<br>(713) PHONE<br></span>', 29.737822,-95.395725, 2, 'http://www.conleym.com/map/icons/world.png'],

//HOUSTON CENTER for PHOTOGRAPY    
    ['<a style="font-family: Arial"  href="http://www.mfah.org/" target="_blank">Houston Center for Photography</a><br><span style="font-size: 12px; font-family: Arial;">ADDRESS<br> Houston, TX 77006<br>(713) PHONE<br></span>', 29.738606,-95.397179, 3, 'http://www.conleym.com/map/icons/world.png'],


//======================  ZONE 2 MUSEUMS  =========================
//HOLOCAUST MUSEUM    
    ['<a style="font-family: Arial" href="http://www.mfah.org/" target="_blank"><b>The Holocaust Museum</b></a><br><span style="font-size: 12px; font-family: Arial;">1001 Bissonnet Street<br> Houston, TX 77005<br>(713) 639-7300<br></span>', 29.725472,-95.386033, 4, 'http://www.conleym.com/map/icons/star-3.png'],
    
//ASIA SOCIETY TEXAS CENTER    
    ['<a style="font-family: Arial" href="http://www.mfah.org/" target="_blank"><b>Asia Society Texas Center</b></a><br><span style="font-size: 12px; font-family: Arial;">1001 Bissonnet Street<br> Houston, TX 77005<br>(713) 639-7300<br></span>', 29.726578,-95.384221, 5, 'http://www.conleym.com/map/icons/star-3.png'],    

//THE WEATHER MUSEUM    
    ['<a style="font-family: Arial" href="http://www.mfah.org/"...