JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;ext=.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="info-box">
    <div style="overflow:hidden;line-height:1.35;min-width:200px;"><b>Water Level = </b>
    </div>
</div>
<div id="map-canvas"></div>

CSS

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

JavaScript

var map;

function initialize() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 2,
        center: {
            lat: -28,
            lng: 137.883
        }
    });
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': "Boston, MA"
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.fitBounds(results[0].geometry.viewport);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
    // Load GeoJSON.
    map.data.addGeoJson(jsonData);
    map.data.addListener('mouseover', function (event) {
        var waterlevel = event.feature.getProperty('waterlevel');
        document.getElementById('info-box').textContent = 'Waterlevel = ' + waterlevel;
    });
    google.maps.event.addListener(map, 'zoom_changed', function () {
        if (map.getZoom() > 5) {
            map.data.setStyle(function (feature) {
                return ({
                    fillOpacity: 0.1
                });
            });
        } else {
            map.data.setStyle(function (feature) {
                return ({
                    fillOpacity: 1.0
                });
            });
        }
    });

    // When the user clicks, set 'isColorful', changing the color of the letters.
    map.data.addListener('click', function (event) {
        event.feature.setProperty('isColorful', true);
    });

    // When the user hovers, tempt them to click by outlining the letters.
    // Call revertStyle() to remove all overrides. This will use the style rules
    // defined in the function passed to setStyle()
    map.data.addListener('mouseover', function (event) {
        map.data.revertStyle();
        map.data.overrideStyle(event.feature, {
            strokeWeight: 8
        });
    });

    map.data.addListener('mouseout', function (event) {
        map.data.revertStyle();
    });
    // [END...