JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-map-label/gh-pages/src/maplabel.js"></script>
<title>Polygon Arrays</title>
<div id="map-canvas">
</div>
CSS
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
JavaScript
var map;
var gpolygons = [];
var infoWindow;
function initialize() {
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(50.71392, -1.983551),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
new google.maps.LatLng(50.71433, -1.98392),
new google.maps.LatLng(50.71393, -1.98239),
new google.maps.LatLng(50.71388, -1.98226),
new google.maps.LatLng(50.71377, -1.98246),
new google.maps.LatLng(50.71332, -1.98296),
new google.maps.LatLng(50.71334, -1.98324),
new google.maps.LatLng(50.71374, -1.9845),
new google.maps.LatLng(50.71436, -1.98389)
];
// Construct the polygon.
var mypolygon = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
mypolygon.setMap(map);
//Define position of label
var myLatlng = new google.maps.LatLng(50.71392, -1.983551);
var mapLabel = new MapLabel({
text: 'My Area Text 1',
position: myLatlng,
map: map,
fontSize: 20,
align: 'left'
});
mapLabel.set('position', myLatlng);
var obj = {};
obj.poly = mypolygon;
obj.label = mapLabel;
gpolygons.push(obj);
var polyCoords = [
new google.maps.LatLng(50.713689004418, -1.9845771789550781),
new google.maps.LatLng(50.71316590540595, -1.9829249382019043),
new google.maps.LatLng(50.71296209901576, -1.983107328414917),
new google.maps.LatLng(50.71296889257639, -1.9837510585784912),
new google.maps.LatLng(50.713186285996215, -1.9845235347747803),
new google.maps.LatLng(50.71293492476347, -1.9847595691680908),
new google.maps.LatLng(50.71311155712187, -1.9853174686431885),
new google.maps.LatLng(50.71335612390394, -1.9853603839874268),
new google.maps.LatLng(50.713396884910225,...