google maps: polygon try

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(0.37380, -0.122037);
    var map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 17
    });

    //polygon
    var polygonCoords = [
        {lat: center.lat() + 0.3742, lng: center.lng() - 0.12203},
        {lat: center.lat() + 0.030, lng: center.lng() - 0.122},
        {lat: center.lat() + 0.087, lng: center.lng() - 0.121},
        {lat: center.lat() + 0.030, lng: center.lng() - 0.030}
    ];


    var strokeStyles = ["solid", "dash-dash", "dash-dot",  "dot-dot"];
    var strokeStyle = strokeStyles[0];
    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};
    }

   ...