JSFiddle - React, Tailwind, and code Playground

by xlbloke

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=drawing"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
    height: 500px;
    width: 500px;
}

JavaScript

var mapOptions = {
        center: new google.maps.LatLng(51.479886, -0.201874),
        zoom: 11
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
        drawingControl: false
    });
    var keys = [];

    google.maps.event.addListener(drawingManager, "rectanglecomplete", function (rect) {
        if (keys[16] && keys[17]) {
            console.log("zooming out");
            map.setCenter(rect.getBounds().getCenter());
            var zoom = map.getZoom();
            map.setZoom(--zoom);
            rect.setMap(null);
            return;
        }

        if (keys[16]) {
            console.log("zooming in");
            map.fitBounds(rect.bounds);
            rect.setMap(null);
            return;
        }
    });


    onkeydown = onkeyup = function (e) {
        e = e || event; // for IE
        keys[e.keyCode] = e.type == 'keydown';
        if (keys[16]) {
            drawingManager.setMap(map);
        } else {
            drawingManager.setMap(null);
        }
    }