Google maps API v3 drawingmanager not drawing dashed polyline right

Question

I am trying to use this example with drawingmanager: https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-dashed

Jsfiddle demo

  var lineSymbol = {
      path: 'M 0,-1 0,1',
      strokeOpacity: 1,
      scale: 4
      };
  var drawingManager = new google.maps.drawing.DrawingManager({
  polylineOptions: {
      icons: [{
      icon: lineSymbol,
    // offset: '100%',
    offset: '0',
    repeat: '20px'
  }],
  editable: true
},  });
drawingManager.setMap(map);

Please only try on polylines in this demo as I only set up the polyline options into dashed icon. The poly has been changed slightly but seems there is a continual line overlapping on top. How do I remove the solid line?

Answer 1

You need to set strokeOpacity: 0 on the polyline (in the PolylineOptions):

var drawingManager = new google.maps.drawing.DrawingManager({
    polylineOptions: {
    icons: [{
      icon: lineSymbol,
      // offset: '100%',
      offset: '0',
      repeat: '20px'
    }],
    strokeOpacity: 0,
    editable: true
  },
});

updated fiddle

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {
      lat: 17.4446,
      lng: 78.3802
    }
  });
  var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4

  };
  var drawingManager = new google.maps.drawing.DrawingManager({
    polylineOptions: {
      icons: [{
        icon: lineSymbol,
        // offset: '100%',
        offset: '0',
        repeat: '20px'
      }],
      strokeOpacity: 0,
      editable: true
    },
  });
  drawingManager.setMap(map);


  google.maps.event.addListener(drawingManager, 'markercomplete', function(m) {
    markersArray.push(m);

    google.maps.event.addListener(m, 'click', function() {
      var infoBox = new google.maps.InfoWindow();
      infoBox.setContent('Marker Info');
      infoBox.open(map, this);
    });

  });

  /* dmMarkerOptions = {
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.MARKER
                ]
            },
            markerOptions: {
                clickable: true,
                editable: true,
                draggable: false
            }
        };

        dmPolygonOptions = {
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.POLYGON,
                ]
            },
            polygonOptions: {
                clickable: true,
                editable: true,
                strokeColor: '#FF0000',
                strokeOpacity: 1,
                strokeWeight: 2,
                fillOpacity: 0
            }
        };
    */
  //drawingManager.setOptions(dmPolygonOptions)
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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