JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=geometry"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js"></script>
<div id="map-canvas" style="height:100%;width:100%;"></div>

CSS

html, body, #selected_map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

// This example adds a user-editable rectangle to the map.
// When the user changes the bounds of the rectangle,
// an info window pops up displaying the new bounds.

var rectangle;
var map;
var infoWindow;
var poly;
var inner;
var polylines = [];
var centerMarker;

var paths = [
    [
    new google.maps.LatLng(38.872886, -77.054720),
    new google.maps.LatLng(38.872602, -77.058046),
    new google.maps.LatLng(38.870080, -77.058604),
    new google.maps.LatLng(38.868894, -77.055664),
    new google.maps.LatLng(38.870598, -77.053346)]
];

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(38.8714, -77.0556),
        zoom: 15
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(52.0619767211195, 4.295717407226562),
    new google.maps.LatLng(52.07294407400174, 4.313404876709001)

    );

    // Define the rectangle and set its editable property to true.
    rectangle = new google.maps.Rectangle({
        fillOpacity: 0.3,
        strokeWeight: 0,
        bounds: bounds,
        editable: false,
        draggable: true
    });

    rectangle.setMap(map);

    drawEdgesRectangle(rectangle);
    //    map.fitBounds(bounds);

    poly = new google.maps.Polygon({
        paths: paths,
        strokeWeight: 3,
        fillColor: '#55FF55',
        fillOpacity: 0.5,
        editable: true
    });

    poly.setMap(map);
    drawEdgesPoly();

    google.maps.event.addListener(poly.getPath(), 'insert_at', drawEdgesPoly);
    google.maps.event.addListener(poly.getPath(), 'remove_at', drawEdgesPoly);
    google.maps.event.addListener(poly.getPath(), 'set_at', drawEdgesPoly);



    // Add an event listener on the rectangle.
    google.maps.event.addListener(rectangle, 'bounds_changed', showNewRect);

    // Define an info window on the map.
    infoWindow = new google.maps.InfoWindow();
}

var drawEdgesPoly = function () {
   ...