How to show dotted/dashed lines on Google Maps of parsed kml files with geoXml3?

Question

I use https://github.com/geocodezip/geoxml3 in order to visualize kml files on Google Maps and it works well, but I would like to change the style of lines, to dotted, or dashed. I've tried that after the kml file is parsed with:

function drawRoute(array,color,stringNumber){

if (typeof myParser != "undefined") {
   myParser.parse(array);  //array is local kml file
}
else{
    var myParser = new geoXML3.parser({map: map});
    myParser.parse(array);
}

var lineSymbol = {
                    path: 'M 0,0 0,0',
                    strokeOpacity: 1,
                    scale: 4
                  };
        for (var i = 0; i < myParser.docs[0].gpolylines.length; i++){
  myParser.docs[0].gpolylines[i].setOptions({
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }]
});

Any type of help appreciated.

Thanks in advance.

Edit: Updated question with whole function + the docs[0], which throws undefined.

Answer 1

You need to (as you say in your question) wait until after the kml file is parsed (using a "parsed" event listener or "afterParse" function).

google.maps.event.addListener(myParser, 'parsed', function() {
  for (var i = 0; i < myParser.docs[0].gpolylines.length; i++) {
    myParser.docs[0].gpolylines[i].setOptions({
      strokeOpacity: 0,
      icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '20px'
      }]
    });
  };
});

proof of concept fiddle

code snippet:

var myParser = null;
var map = null;
var myLatLng = null;

function initialize() {
  myLatLng = new google.maps.LatLng(37.422104808, -122.0838851);

  var myOptions = {
    zoom: 18,
    center: new google.maps.LatLng(37.422104808, -122.0838851),
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  myParser = new geoXML3.parser({
    map: map,
    singleInfoWindow: true,
  });
  google.maps.event.addListener(myParser, 'parsed', function() {
    var lineSymbol = {
      path: 'M 0,0 0,0',
      strokeOpacity: 1,
      scale: 4
    };
    for (var i = 0; i < myParser.docs[0].gpolylines.length; i++) {
      myParser.docs[0].gpolylines[i].setOptions({
        strokeOpacity: 0,
        icons: [{
          icon: lineSymbol,
          offset: '0',
          repeat: '20px'
        }]
      });
    };
  });
  myParser.parseKmlString(kmlStr);
}
google.maps.event.addDomListener(window, "load", initialize);
var kmlStr = '<?xml version="1.0" encoding="utf-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Document>    <name>tennis-lines</name><open>1</open><Placemark><name>outside</name><LineString><coordinates>-122.43193945401,37.801983684521 -122.431564131101,37.8020327731402 -122.431499536494,37.801715236748 -122.43187136387,37.8016634915437 -122.43193945401,37.801983684521</coordinates></LineString></Placemark><Placemark><name>west</name><LineString><coordinates> -122.431885303019,37.8019316061803 -122.431762847554,37.8019476932246 -122.431719843168,37.8017374462006 -122.431841863906,37.8017213314352 -122.431885303019,37.8019316061803</coordinates></LineString></Placemark><Placemark><name>east</name><LineString>  <coordinates>-122.431714248439,37.8019544341044 -122.431592404659,37.8019694509363 -122.431548777661,37.8017591041777 -122.431671453253,37.8017428443014 -122.431714248439,37.8019544341044</coordinates></LineString></Placemark></Document></kml>';

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<div id="map_canvas"></div>