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    
        ['The Menil Collection', 'http://www.mfah.org/', 'Houston TX 77006', '(713) 639-7300', 29.737593,-95.398525, 1, 'http://www.conleym.com/map/icons/world.png'],
    
    //ROTHKO CHAPEL    
        ['Rothko Chapel', 'http://www.mfah.org/', 'Houston, TX 77006', '(713) 639-7300', 29.737822,-95.395725, 2, 'http://www.conleym.com/map/icons/world.png'],
    
    //HOUSTON CENTER for PHOTOGRAPY    
        ['Houston Center for Photography', 'http://www.mfah.org/', 'Houston, TX 77006', '(713) 639-7300', 29.738606,-95.397179, 3, 'http://www.conleym.com/map/icons/world.png']
    
    
    // and so on...
    
    ];

function initialize() {
    
 // Create an array of styles.
  var styles = [
     { 
       "stylers": [ 
         { "invert_lightness": true }, 
         { "visibility": "on" }, 
         { "hue": "#ff6e00" }, 
         { "weight": 0 }, 
         { "gamma": 0.8 } 
       ]
     },{
    } 
  ];
      // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});


      //OPTIONS: Create a map object, and include the MapTypeId to add
     // to the map type control.

    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(29.718, -95.389),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            mapTypeIds: [google.maps.MapTypeId.HYBRID, 'map_style']
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    //Associate the styled map with the MapTypeId and...