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 PolygonExtend(name, path) {
    	//this.name = name;
    	this.path = path;
    	this.name =  new google.maps.Polygon({
    			path: this.path,
    	});
    		
    	this.show = function() {
    		this.name.setMap(map);
    	};
    	this.hide = function() {
    		this.name.setMap(null);
    	};

    	return this.name.setMap(map); // makes Polygon show when instantiated
}

a = new PolygonExtend('a', coords); // works and renders Polygon

a.hide(); // works, hides Polygon
a.show(); // works, makes visible again Polygon

var btn = document.getElementById('btn');
google.maps.event.addDomListener(btn, 'click', a.hide); // TypeError: this.name is undefined