JSFiddle - React, Tailwind, and code Playground
by joshmoto
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map"></div>
SCSS
html,
body,
#map {
width: 100%;
height: 100%;
}
JavaScript
function initialize() {
var permit_polygons = [
[
{ lat: 51.895995, lng: -0.72863 },
{ lat: 51.896766, lng: -0.730022 },
{ lat: 51.896524, lng: -0.730754 },
{ lat: 51.896401, lng: -0.731234 },
{ lat: 51.896294, lng: -0.731832 },
{ lat: 51.896219, lng: -0.732345 },
{ lat: 51.896102, lng: -0.732945 },
{ lat: 51.895774, lng: -0.732691 },
{ lat: 51.895531, lng: -0.732618 },
{ lat: 51.895359, lng: -0.732543 },
{ lat: 51.894751, lng: -0.73152 },
{ lat: 51.894488, lng: -0.731037 },
{ lat: 51.894324, lng: -0.730708 },
{ lat: 51.895995, lng: -0.72863 }
],
[
{ lat: 51.895658, lng: -0.728004 },
{ lat: 51.895995, lng: -0.72863 },
{ lat: 51.894324, lng: -0.730708 },
{ lat: 51.893784, lng: -0.731217 },
{ lat: 51.893709, lng: -0.730992 },
{ lat: 51.893567, lng: -0.730793 },
{ lat: 51.893435, lng: -0.730734 },
{ lat: 51.89333, lng: -0.730761 },
{ lat: 51.893244, lng: -0.729696 },
{ lat: 51.89314, lng: -0.729391 },
{ lat: 51.893586, lng: -0.729249 },
{ lat: 51.894152, lng: -0.728991 },
{ lat: 51.894983, lng: -0.728525 },
{ lat: 51.895478, lng: -0.728184 },
]
];
var mapSettings = {
center: new google.maps.LatLng(14.5667, 120.9927),
zoom: 17,
mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById("map"), mapSettings);
var permit_areas;
for (var i = 0; i < permit_polygons.length; i++) {
console.log(permit_polygons[i]);
permit_areas = new google.maps.Polygon({
path: permit_polygons[i],
map: map,
...