JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<a id="btn">Button</a>
<hr>
<div id="map">

</div>

CSS

#map {
  height: 400px;
}

#btn {
  display: inline-block;
  padding: 10px;
  background: green;
  color: white;
  cursor: pointer;
}

JavaScript

var mapOptions = {
		center: new google.maps.LatLng(4.7102000, -74.0308118), //(-12.0698136,-76.9446748),
		zoom: 18,
		mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var coords = [
  {lat: 4.711177836295898, lng: -74.03219819068909},
  {lat: 4.710354506576612, lng: -74.03219819068909},
  {lat: 4.710354506576612, lng: -74.03176367282867},
  {lat: 4.711177836295898, lng: -74.03176367282867}
];

function PointlessPolygon(map, coords){
  var t = this;
  this.map = map; this.coords = coords; this.showing = true;
  this.polygon = new google.maps.Polygon({paths:t.coords});
  this.show = function(){
    this.polygon.setMap(map); this.showing = true;
  };
  this.hide = function(){
    this.polygon.setMap(); this.showing = false;
  }
  this.polygon.setMap(map); // makes Polygon show when instantiated
}
var pp = new PointlessPolygon(map, coords);
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  pp.showing ? pp.hide() : pp.show();
})