google maps: polygon

by ceebee

HTML

<div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.21&libraries=geometry,places&callback=initMap" async defer></script>

CSS

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}
#map {
   height: 500px;
   width: 500px;
}

JavaScript

function initMap() {

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

    //polygon
    var polygonCoords = [
        {lng:-122.065265,lat: 37.343283},
		{lng:-122.065038,lat: 37.342656},
		{lng:-122.064701,lat: 37.341723},
		{lng:-122.064584,lat: 37.341635},
		{lng:-122.064336,lat: 37.341459},
		{lng:-122.064212,lat: 37.341349},
		{lng:-122.064033,lat: 37.341135},
		{lng:-122.063661,lat: 37.340283},
		{lng:-122.063474,lat: 37.340027},
		{lng:-122.063448,lat: 37.339992},
		{lng:-122.063262,lat: 37.33986}
    ];


    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 =...