JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
		  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>



    <div id="canvases">
        <div class="canvas" id="canvas1"></div>
        <div id="map"></div>
    </div>

CSS

html, body, #map {
        height: 100%;
        margin: 0px;
        padding: 0px
    }  
    
    #canvases{
        top: 20px;
        position: relative;
    }
    
    #map {
        position: absolute;
        top:0;
        left:0;
        z-index:0;
        width: 500px;
        height: 400px;
    }
    
    #canvas1{
        position: relative;
        z-index:1;    
    }
    
    body {
        padding-left: 15px;
    }
    .intro {
        font-size: 14px;
        font-family: Arial, sans-serif;
    }
    #canvases {
        width: 500px;
        height: 400px;
    }
    .canvas {
        border: 1px solid gray;
        width: 100%;
        height: 100%;
    }
    svg {
        cursor: crosshair;
    }
    circle {
        fill: steelblue;
        opacity: 0.75;
    }
    circle.highlighted {
        fill: orange;
    }
    path {
        stroke: #000;
        stroke-width: 1;
        fill: none;
    }
    text {
        font-size: 10px;
        text-anchor: middle;
        pointer-events: none;
        fill: #000;
        font-family: Arial, sans-serif;
    }

.selectioncomplete{
    fill: red;
    fill-opacity:0.2;
}

JavaScript

(function() {

    var shapeSelector = {
        init: function(){
            var that = this;
            
            var width = 500;
            var height = 400;
            
            
            var paths = "M184,174L209,266L345,247L364,143L256,144 L184,174L256,144";
            
            this.svg = d3.select("#canvas1")
                .append("svg")
                .attr("width", width) 
                .attr("height", height)   
                .append("path").attr("d", paths)
                .attr("class", "selectioncomplete")
                       
            this.buildMap();
            
            this.bindEvents();
        },
        identifyMarkersInShape: function(){
            //__ function is invoked every time a shape is drawn/editted
            
            
            // hides all the markers
            
            
            //finds the markers inside the given shape
            
        
        },
        bindEvents: function(){
        
            //handle zoom of the map and scale of the path shape
           
        },
        buildMap: function(){
            var locations = [
                ['Some other Beach', -32.80010128657071, 150.28747820854187, 6],
                ['Bondi Beach', -33.890542, 151.274856, 4],
                ['Coogee Beach', -33.923036, 151.259052, 5],
                ['Cronulla Beach', -34.028249, 151.157507, 3],
                ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                ['Maroubra Beach', -33.950198, 151.259302, 1]
                ];
            
                var map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 6,
                  center: new google.maps.LatLng(-33.92, 151.25),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            
                var infowindow = new google.maps.InfoWindow();
            
                var marker, i;
            
                for (i = 0; i <...