JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>

<div id="map"></div>

CSS

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

.stations, .stations svg {
  position: absolute;
}

.stations svg {
  width:50px;
  height:50px;
  padding-right: 100px;
  font: 10px sans-serif;
}

.stations circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}


.shape path {
    fill: red;
    fill-opacity:0.2;    
}

JavaScript

var googleMaps = {
    invoke: function(){
    
        
        var data = {
            "Gill":{
                "coordinates":[
                    -120.12, 36.98
                ]
            },
            "Penolope":{
                "coordinates":[
                    -121.92, 37.37
                ]
            }
        };
        
        
        // Create the Google Map…
        var map = new google.maps.Map(d3.select("#map").node(), {
            zoom: 8,
            center: new google.maps.LatLng(37.76487, -122.41948),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles:[{"stylers": [{"saturation": -35},{"lightness": 35}]}] 
        });
        
        // Load the station data. When the data comes back, create an overlay.
        
        var overlay = new google.maps.OverlayView();
        
        // Add the container when the overlay is added to the map.
        overlay.onAdd = function() {
            var layer = d3.select(this.getPanes().overlayLayer).append("div")
                .attr("class", "stations");
            
            var shapelayer = d3.select(this.getPanes().overlayLayer).append("div")
                .attr("class", "shape");
            
            // Draw each marker as a separate SVG element.
            // We could use a single SVG, but what size would it have?
            overlay.draw = function() {
                var projection = this.getProjection();
                
                
                //** shape area **//
                var paths = "M184,174L209,266L345,247L364,143L256,144 L184,174L256,144";
                
                var shapeArea = shapelayer.append("svg:svg")
                .attr("width", "100%") 
                .attr("height", "100%")   
                .append("path")
                .attr("d", paths)
                .each(transformshape)
                .attr("class", "selectioncomplete")
                
                
                function transformshape(d) {
 ...