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>