Dashed polygons Google Maps

Question

I'm asking because I've searched everywhere online and this is all I have been able to find. So far I've been able to make dashed lines on google maps with the following code.

app.config.dashSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4,
},

 new google.maps.Polyline({
            map:map,
            path:polygon.getPath ? polygon.getPath() : polygon,
            strokeColor: vue.Projects[projectID].ContractorColor,
            strokeOpacity:0,
            icons:[{
                icon:app.config.dashSymbol,
                offset:'0',
                repeat:'20px'
            }],
        })

That all works fine, but is there a way that I can make a Polygon object with a dashed outline? I tried this, by it doesn't work

new google.maps.Polygon({
            map:map,
            paths:polygon.getPath ? polygon.getPath() : polygon,
            fillColor: vue.Projects[projectID].ContractorColor,
            strokeColor:vue.Projects[projectID].ContractorColor,
            strokeOpacity:0,
            icons:[{
                icon:app.config.dashSymbol,
                offset:'0',
                repeat:'20px'
            }]
        })

Answer 1

I don't think you can. But you could overlay a Polyline on top of the Polygon.

function initialize() {
  
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(40, 9),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var path = [
    new google.maps.LatLng(39, 4),
    new google.maps.LatLng(34, 20),
    new google.maps.LatLng(44, 20),
    new google.maps.LatLng(39, 4)
  ];

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 2
  };

  var polygon = new google.maps.Polygon({
    strokeOpacity: 0,
    strokeWeight: 0,
    fillColor: '#00FF00',
    fillOpacity: .6,
    paths: path,
    map: map
  });

  var polylineDotted = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '10px'
    }],
    path: path,
    map: map
  });
}

initialize();

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>