JSFiddle - React, Tailwind, and code Playground

by vinodlouis

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>  
<div id="maps1" name="maps1" style="width:400px;height:600px;">
  </div>

JavaScript

function initialize() {
      var latlng = new google.maps.LatLng(43.003207, -73.610312);
    var mapOptions = {
      center: latlng,
      zoom: 16,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };

var map = new google.maps.Map(document.getElementById('maps1k'),mapOptions);
var greatredoubt = createOverlay();
  greatredoubt.setMap(map);

  }

  function createOverlay() {
    var overlayCoords = new Array ();

    var processedData = greatredoubtData.split(";");

    for (var i=0; i<processedData.length; i++) {
    var myCoords = processedDate[i].split(",");
    overlayCoords.push(new google.maps.LatLng(xyCoords[0], xycoords[1]));

  }

    var myOverlay = new google.maps.Polygon({
      paths: overlayCoords,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35

  });

    return myOverlay
  }

initialize();