JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;.js"></script>
<div id="old-bounds"></div>
<div id="new-bounds"></div>
<button id="btn">Launch Panel</button>
<div id="map-canvas"></div>
<div id="panel" class="hide">Content goes in here</div>

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    overflow: hidden;
}
#old-bounds, #new-bounds, button {
    margin: 10px 0;
}
#panel {
    position: fixed;
    bottom: 0;
    height: 200px;
    padding: 1em 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    z-index: 999;
}
.hide {
    display: none;
}
.show {
    display: block;
}

JavaScript

var map,
mapBounds;

function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(41.879535, -87.624333),
        scrollwheel: false
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var oldBounds = document.getElementById("old-bounds");
    var newBounds = document.getElementById("new-bounds");

    google.maps.event.addListener(map, 'bounds_changed', function () {
        oldBounds.innerHTML = "old bounds: " + map.getBounds();
    });

    var btn = document.getElementById("btn");
    btn.onclick = function () {
        $("#panel").addClass("show");
        newBounds.innerHTML = "new bounds: " + map.getBounds();
    };
}

google.maps.event.addDomListener(window, 'load', initialize);