No lines drawn when drawing Polyline with MVCArray, with API v3.16 and later

If you use Google Maps API v3.16 and later, polyline are not drawn when a new marker is added to the polyline path and MVCArray, only markers plotted on a map.

My program based on code from http://nettique.free.fr/gmap/toolbar.html

html file :

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>map toolbar implementation</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.exp&sensor=true"></script>
  <style type="text/css">
 --- truncate ----
  </style>
    <script type="text/javascript" src="toolbarv3_files/mapToolbar.js"></script>
    <script type="text/javascript">
        // Register an event listener to fire when the page finishes loading.
        google.maps.event.addDomListener(window, 'load', initialize);   
    </script>
</head>

body section

drawing toolbar :

<div id="hand_b" onclick="MapToolbar.stopEditing()"/>
<div id="line_b" onclick="MapToolbar.initFeature('line')"/>

canvas :

<div id="map" style="width: 85%; height: 100%; position: absolute;"></div>

script file (mapToolbar.js):

var map;


var MapToolbar = {

//reorder index of a poly markers array

    reindex:function(markers){
            markers.forEach(function(marker, index){
                marker.index = index;
            });         
    },


//add a point to a poly, 'e' can be a click event or a latLng object

    addPoint : function(e, poly, index) {
        var e = (typeof e.latLng != "undefined")? e.latLng : e,
            image = new google.maps.MarkerImage('images/marker-edition.png',
            new google.maps.Size(9, 9),
            new google.maps.Point(0, 0),
            new google.maps.Point(5, 5)),
        imageover = new google.maps.MarkerImage('images/marker-edition-over.png',
            new google.maps.Size(9, 9),
            new google.maps.Point(0, 0),
            new google.maps.Point(5, 5)),
                path = poly.getPath(),
                index = (typeof index != "undefined")? index : path.length,
                markers = (poly.markers)? poly.markers : new google.maps.MVCArray, 
        marker = new google.maps.Marker({
                    position: e,
                    map: map,
                    draggable: true,
                    icon: image
        });

        marker.index = index;    
        path.insertAt(index, e);
        markers.insertAt(index, marker)
        if(arguments[2]){
            MapToolbar.reindex(markers);    
        }

    features:{
            .....
            lineTab: {},
            .....
    },  

//instanciate a new Feature instance and create a reference 

    initFeature: function(type){
            new MapToolbar.Feature(type);
    },

//check if a toolbar button is selected

    isSelected: function(el){
       return (el.className == "selected"); 
    },

//the map DOM node container
    ....
    lineCounter:0,
    ....

//select hand button

    stopEditing: function() {
      this.removeClickEvent();
      this.select("hand_b");
    },

//create new polyline function

MapToolbar.Feature.prototype.poly = function(type) {
    var color = MapToolbar.getColor(false),
            path = new google.maps.MVCArray,
            poly,
            self = this,
            el = type + "_b";

    if(type=="shape"){
        poly = self.createShape( {strokeWeight: 3, fillColor: color}, path );
    }else if(type=="line"){
        poly = self.createLine( {strokeWeight: 3, strokeColor: color }, path );
    }

    poly.markers = new google.maps.MVCArray; 

    if(MapToolbar.isSelected(document.getElementById(el))) return;
    MapToolbar.select(el);
    MapToolbar.currentFeature = poly;   
    poly.setMap(map);     
    if(!poly.$el){
        ++MapToolbar[type+"Counter"];
        poly.id = type + '_'+ MapToolbar[type+"Counter"];
        poly.$el = MapToolbar.addFeatureEntry(poly.id, color);      
        MapToolbar.features[type+"Tab"][poly.id] = poly;                
    }
}


MapToolbar.Feature.prototype.createLine = function(opts, path) {
    var poly = new google.maps.Polyline({
        strokeWeight: opts.strokeWeight,
        strokeColor: opts.strokeColor
    }), self = this;  
    poly.setPath(new google.maps.MVCArray(path));
    return poly;
}

//initialization function

function initialize(container) {
    var options = {
          mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN],
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
          }
    }
    map = new google.maps.Map(document.getElementById('map'));
    map.setCenter(new google.maps.LatLng(47.9, 1.9 ));
    map.setZoom(12);
    map.setMapTypeId( google.maps.MapTypeId.ROADMAP );

    with(MapToolbar){
        with(buttons){
        .....
            $hand = document.getElementById("hand_b");
            $line = document.getElementById("line_b");
        ....    
        }
        ....
        select("hand_b");
    }

    MapToolbar.polyClickEvent = google.maps.event.addListener(map, 'click',  function(event){
    if( !MapToolbar.isSelected(MapToolbar.buttons.$shape) && !MapToolbar.isSelected(MapToolbar.buttons.$line) ) return;
        if(MapToolbar.currentFeature){
            MapToolbar.addPoint(event, MapToolbar.currentFeature);
        }
    });
}

complete version of "mapToolbar.js" script file is also available at : https://code.google.com/p/js2shapefile/source/browse/trunk/lib/mapToolbar.js?r=2

an error occurred when executing line "path.insertAt(index, e);" (addPoint function).

TypeError: this.j[qd] is not a function

...his[gd](a,b)}};L.insertAt=function(a,b){this.j[qd](a,0,b);bg(this);S[n](this,"in...

{main,g...try}.js (line 26, col 1473)

Solution

I had the same problem. I've solved changing poly.setPath in createLine function.

 MapToolbar.Feature.prototype.createLine = function(opts, path) {
    var poly = new google.maps.Polyline({
        strokeWeight: opts.strokeWeight,
        strokeColor: opts.strokeColor
    }), self = this;

    // 27/08/2014 - This not work
    //poly.setPath(new google.maps.MVCArray(path));
    poly.setPath(path);

    return poly;
}