JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

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

CSS

html, body, #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
  }

JavaScript

var mapOptions = {
          center: new google.maps.LatLng(37.286172, -121.80929),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

        var coords = [
            new google.maps.LatLng(37.686172, -122.20929),
            new google.maps.LatLng(37.686172, -121.40929),
            new google.maps.LatLng(36.886172, -121.40929),
            new google.maps.LatLng(36.886172, -122.20929),
            new google.maps.LatLng(37.686172, -122.20929)
        ];

        var coords2 = [
            
             new google.maps.LatLng(37.486172, -122.00929),
            new google.maps.LatLng(37.086172, -122.00929),
            new google.maps.LatLng(37.086172, -121.60929),
            new google.maps.LatLng(37.486172, -121.60929),
            new google.maps.LatLng(37.486172, -122.00929)
            ];          

        var polygon = new google.maps.Polygon({
            paths: [coords, coords2],
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: '#00FF00',
            fillOpacity: 0.35
        });

        polygon.setMap(map);