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>