JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map"></div>
CSS
#map {
width: 450px;
height: 400px;
}
JavaScript
var array_polygon1 = [
new google.maps.LatLng(22.615278575733523, 113.69888305664062),
new google.maps.LatLng(22.421184710331854, 113.44619750976562),
new google.maps.LatLng(22.217920166311025, 114.05731201171875),
new google.maps.LatLng(22.598797546832557, 114.04495239257812)
];
var array_polygon2 = [
new google.maps.LatLng(22.703988606693763, 113.47640991210938),
new google.maps.LatLng(22.504944902977012, 113.66317749023438),
new google.maps.LatLng(22.351666279509544, 113.19900512695312),
new google.maps.LatLng(1.669778674332324, 113.24844360351562)
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(22.615278575733523, 113.69888305664062),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
polygon1 = new google.maps.Polygon({
paths: array_polygon1,
strokeColor: "#0FF000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0FF000",
fillOpacity: 0.35
});
polygon2 = new google.maps.Polygon({
paths: array_polygon2,
strokeColor: "#0FF000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0FF000",
fillOpacity: 0.35
});
polygon1.setMap(map);
polygon2.setMap(map);
var union = new google.maps.Polygon({
paths: polygon1.concat(polygon2),
strokeColor: "#ffffff",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#ffffff",
fillOpacity: 0.35
});
...