google maps: polygon

by ceebee

HTML

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Test</title>

	</head>
	<body>
		<div id="map">
		</div>
	</body>
	
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwPHqwJggMETXvR8vPF667HpxOjQDZ2bM&callback=initMap"></script>
	<script type="text/javascript" src="scripts/polygonCoordinates.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: hexColor,
				fillOpacity: 0.35,
				title: tooltip
			}));
			
			polygons[polygons.length-1].setMap(map);
		}
	</script>
</html>

CSS

#map {
			width: 100%;
			height: 400px;
			background-color: grey;
		  }

JavaScript

function initMap() {

    var center = new google.maps.LatLng(-33.8688, 151.2195);
    var map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 17
    });

    //polygon
    var polygonCoords = [
        {lat: center.lat() - 0.001, lng: center.lng() - 0.001},
        {lat: center.lat() - 0.001, lng: center.lng() + 0.001},
        {lat: center.lat() + 0.001, lng: center.lng() + 0.001},
        {lat: center.lat() - 0.001, lng: center.lng() - 0.001}
    ];


    var strokeStyles = ["solid", "dash-dash", "dash-dot",  "dot-dot"];
    var strokeStyle = strokeStyles[1];
    var strokeWidth = 3;
    var strokeOpacity = 1.0;
    var strokeColor = '#FF0000';
    var fillColor = '#FFF000';
    var fillOpacity = 0.5;

    var dashArray;
    if(strokeStyle == "dash-dot")
    {
        dashArray =  [5, 4 + strokeWidth - 1, 1, 4 + strokeWidth - 1];
    }
    else if(strokeStyle == "dash-dash")
    {
        dashArray =  [7, 7 + strokeWidth - 1];
    }
    else if(strokeStyle == "dot-dot")
    {
        dashArray =  [1, 3 + strokeWidth - 1];
    }
    else //solid
    {
        dashArray =  [];
    }

    var mainOpts = {};
    var strokeOpts = {};
    initOptions(mainOpts, strokeOpts);

    var fill = new google.maps.Polygon(mainOpts);
    var stroke = new google.maps.Polyline(strokeOpts);

    function createPattern(pattern/*array*/)
    {
        var symbol = {path: "", scale: 1};
        var strokePattern = pattern;
        var visiblePixels = true;
        var patternLength = 0;
        strokePattern.forEach(function(segmentLength) {
            if (visiblePixels)
            {
                symbol.path = symbol.path + "M 0," + patternLength + " 0," + (segmentLength + patternLength) + " Z ";
            }
            patternLength += segmentLength;
            visiblePixels = !visiblePixels;
        });
        symbol.path = symbol.path.trim();
        return {symbol: symbol, repeatDistance: patternLength};
    }

    function...