JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map-wrap">
    <div id="map-canvas"></div>
    <div id="rubber-band"></div>
</div>

CSS

#map-wrap{
    position:relative;   
}

#map-canvas{
    position: relative;
    width: 300px;
    height: 200px; 
    display: block; 
}

#rubber-band{
    position: relative;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 30px;
    border: 1px solid #ff0000;
    background-color: transparent; 
}

JavaScript

var map;
var dragging = false;
var rect;
var pos1, pos2;
var latlng1, latlng2;

$(document).ready(function() {
    initMap();
});

function initMap() {
    var latlng = new google.maps.LatLng(43, -89);
    var settings = {
        zoom: 4,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    var mapElem = $("#map-canvas");
    map = new google.maps.Map(mapElem[0], settings);
    rect = new google.maps.Rectangle({
                map: map
            });

    google.maps.event.addListener(map, 'mousedown', function(mEvent) {
        map.draggable = false;
        latlng1 = mEvent.latLng;
        dragging = true;
        pos1 = mEvent.pixel;
    });

    google.maps.event.addListener(map, 'mousemove', function(mEvent) {
        latlng2 = mEvent.latLng;
        console.log(mEvent);
        showRect();
    });

    google.maps.event.addListener(map, 'mouseup', function(mEvent) {
        map.draggable = true;
        dragging = false;
    });
    
    google.maps.event.addListener(rect, 'mouseup', function(data){
        map.draggable = true;
        dragging = false;
        
        var lat1 = latlng1.lat();
        var lat2 = latlng2.lat();
        var minLat = lat1<lat2?lat1:lat2;
        var maxLat = lat1<lat2?lat2:lat1;
        var lng1 = latlng1.lng();
        var lng2 = latlng2.lng();
        var minLng = lng1<lng2?lng1:lng2;
        var maxLng = lng1<lng2?lng2:lng1;
        alert('Datbase query for the following bounds:\n\nlat: ' + minLat + ' to ' + maxLat+ '\n\nlng: ' + minLng + ' to ' + maxLng);
    });
    

}

function showRect() {
    if(dragging){
        if (rect === undefined) {
            rect = new google.maps.Rectangle({
                map:...