JSFiddle - React, Tailwind, and code Playground
by ceebee
HTML
<script src="//jsfiddle.net/ceebee/3Lyzpw5b/1/embed/js/"></script>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
#map {
width: 100%;
height: 400px;
background-color: grey;
}
</style>
</head>
<body>
<div id="map">
</div>
</body>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwPHqwJggMETXvR8vPF667HpxOjQDZ2bM&callback=initMap"></script>
<script async src="//jsfiddle.net/ceebee/3Lyzpw5b/1/embed/js/"></script>
<script type="text/javascript">
var polygons = [];
var map;
// Initialize and add the map
function initMap()
{
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(37.41391, -122.08130)
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
// Define the LatLng coordinates for the polygon's path.
var sunnyvalePolygon = getSunnyvalePolygon();
pushPolygon(sunnyvalePolygon, "#FF0000", "Sunnyvale");
var mountainViewPolygon = getMountainViewPolygon();
pushPolygon(mountainViewPolygon, "#00FF00", "Mountain View");
var losAltosPolygon = getLostAltosPolygon();
pushPolygon(losAltosPolygon, "#0000FF", "Lost Altos");
var losAltosHillsPolygon = getLosAltosHillsPolygon();
pushPolygon(losAltosHillsPolygon, "#DDDD00", "Los Altos Hills");
var menloParkPolygon = getMenloParkPolygon();
pushPolygon(menloParkPolygon, "#DD00DD", "Menlo Park");
var paloAltoPolygon = getPaloAltoPolygon();
pushPolygon(paloAltoPolygon, "#00DDDD", "Palo Alto");
var redwoodCityPolygon = getRedwoodCityPolygon();
pushPolygon(redwoodCityPolygon, "#DDAADD", "Redwood City");
}
// Construct the polygon.
function pushPolygon(polygonPath, hexColor, tooltip)
{
polygons.push(new google.maps.Polygon({
paths: polygonPath,
strokeColor: hexColor,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor:...