Coords

by ceebee

HTML

<div id="map"></div>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwPHqwJggMETXvR8vPF667HpxOjQDZ2bM&callback=initMap"></script>

CSS

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

JavaScript

function initMap() {

   var mapOptions = {
				zoom: 10,
				center: new google.maps.LatLng(37.41391, -122.08130)
    };

    //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[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};
    }

    function initOptions(mainOpts, strokeOpts)
    {
        mainOpts.path =...