JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
CSS
#map {
width: 600px;
height: 600px;
}
JavaScript
var mapOptions = {
zoom: 1,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map($('#map')[0], mapOptions);
// POLYGON ((-180 -85, 180 -85, 180 -60, -180 -60, -180 -85))
var points = [
new google.maps.LatLng(-85, -180),
new google.maps.LatLng(-85, -90),
new google.maps.LatLng(-85, 0),
new google.maps.LatLng(-85, 90),
new google.maps.LatLng(-85, 180),
new google.maps.LatLng(-72.5, 180),
new google.maps.LatLng(-60, 180),
new google.maps.LatLng(-60, 90),
new google.maps.LatLng(-60, 0),
new google.maps.LatLng(-60, -90),
new google.maps.LatLng(-60, -180),
new google.maps.LatLng(-72.5, -180),
new google.maps.LatLng(-85, -180)
];
var polygon = new google.maps.Polygon({
paths: points,
strokeColor: '#ff0000',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#800000',
fillOpacity: 0.5,
clickable: true,
});
polygon.setMap(map);