JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map-canvas"></div>
<div id="custom-stuff"></div>

CSS

html, 
body, 
#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
#custom-stuff {
    font-family: sans-serif;
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 100%;
    background: rgba(255, 0, 0, 0.5);
}

JavaScript

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var berlin = new google.maps.LatLng(42.850033, -83.5500523);


var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
    zoom: 8,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.RIGHT_TOP
    },
    scaleControl: false,
    scrollwheel: false,
    panControl: false,
    backgroundColor: '#5c606b',
    streetViewControl: false,
    mapTypeControlOptions: false
}
map = new google.maps.Map(mapDiv, mapOptions);

// bounds helper
var mapHelper = new google.maps.OverlayView();
mapHelper.draw = function () {
    if (!this.ready) {
        this.ready = true;
        google.maps.event.trigger(this, 'ready');
    }
};
mapHelper.setMap(map);


var marker1 = new google.maps.Marker({
    position: chicago,
    map: map,
    title: 'Chicago'
});
var marker2 = new google.maps.Marker({
    position: berlin,
    map: map,
    title: 'Berlin'
});

var bounds = new google.maps.LatLngBounds();
bounds.extend(chicago);
bounds.extend(berlin);
map.fitBounds(bounds);

google.maps.event.addListenerOnce(map, 'idle', function() {
    var proj = mapHelper.getProjection();
    var latlng = bounds.getSouthWest();
    var swPoint = proj.fromLatLngToContainerPixel(latlng);
    var latlng2 = proj.fromContainerPixelToLatLng({x: swPoint.x - 200, y: swPoint.y});
    bounds.extend(latlng2);
    map.fitBounds(bounds);
});

// add bounds visualisation with red line
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var boundingBoxPoints = [
    ne, new google.maps.LatLng(ne.lat(), sw.lng()),
    sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
var boundingBox = new google.maps.Polyline({
    path: boundingBoxPoints,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});
boundingBox.setMap(map);