JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="header"></div>
<div id="sidebar"></div>
<div id="map"></div>

CSS

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

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: rgba(255,0,0,.5);
    z-index: 3;
}

#sidebar {
    position: absolute;
    top: 0;
    left: 5%;
    width: 20%;
    height: 100%;
    background: rgba(0,0,255,.5);
    z-index: 2;
}

#map {
    width: 100%;
    height: 100%;
}

JavaScript

var locations = [
    ['Bondi Beach', -33.890542, 151.274856],
    ['Coogee Beach', -33.923036, 151.259052],
    ['Cronulla Beach', -34.028249, 151.157507],
    ['Manly Beach', -33.80010128657071, 151.28747820854187],
    ['Maroubra Beach', -33.950198, 151.259302],
    ['Lidcombe', -33.864414, 151.042303],
    ['Pymble', -33.744051, 151.141765],
    ['Rozelle', -33.862961, 151.170604]
];

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-33.92, 151.25),
        zoom: 11,
        disableDefaultUI: true
    };
    var map = new google.maps.Map(document.getElementById('map'),
        mapOptions);
    
    var center, marker, i;

    // keep map in the center when resizing as per http://stackoverflow.com/questions/8792676/
    function calculateCenter() {
        center = map.getCenter();
    }
    google.maps.event.addDomListener(map, 'idle', function() {
        calculateCenter();
    });
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(center);
    });

    // put in markers from an array as per http://stackoverflow.com/questions/3059044/
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);