google maps api 3 - Cannot get my polyline drawn or visible -

i try draw polyline according example: https://developers.google.com/maps/documentation/javascript/examples/geometry-encodings.

my map displayed, markers displayed polyline not drawn, or not visible. don't see what's wrong.

my javascript is:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry"></script>  $( document ).ready(function($) {      var map;     var poly;     var iconbase = 'https://maps.google.com/mapfiles/kml/shapes/';     var ndgiconbase = 'http://example.com/img/';     var clickmarker;      nextwaypoint = parseint(document.getelementbyid('agpoiwaypoints_size').innerhtml, 10);     countwaypoint = nextwaypoint;      function initialize() {          var mapcanvas = document.getelementbyid('map-canvas');          var content;         content = document.getelementbyid('agpoi-0-lat').innerhtml         var lat0 = parsefloat(content.substr(content.indexof(":")+1));          content = document.getelementbyid('agpoi-0-lng').innerhtml         var lng0 = parsefloat(content.substr(content.indexof(":")+1));          content = document.getelementbyid('agpoi-1-lat').innerhtml         var lat1 = parsefloat(content.substr(content.indexof(":")+1));          content = document.getelementbyid('agpoi-1-lng').innerhtml         var lng1 = parsefloat(content.substr(content.indexof(":")+1));          var mapoptions = {           center: new google.maps.latlng((lat1 + lat0) / 2, (lng1 + lng0) / 2),           zoom: 18,           maptypeid: google.maps.maptypeid.roadmap          }          map = new google.maps.map(mapcanvas, mapoptions);          var polyoptions = {             strokecolor: '#000000',             strokeopacity: 1.0,             strokeweight: 3,             map: map         };          poly = new google.maps.polyline(polyoptions);          new google.maps.marker({           position: {lat: lat0, lng: lng0},           map: map,           icon: ndgiconbase + 'mylogo.png'         });              new google.maps.marker({             position: {lat: lat1, lng: lng1},             map: map,             icon: ndgiconbase + 'mylogo.png'         });          google.maps.event.addlistener(map, 'click', function(e) {             placemarker(e.latlng, map);         });          var position = {lat: lat0, lng: lng0};          var path = poly.getpath();         path.push(position);          var content;         (i = 0; < countwaypoint; i++) {              content = document.getelementbyid("agpoiwaypoints-" + + "-latitude").value;             lat = parsefloat(content);              content = document.getelementbyid("agpoiwaypoints-" + + "-longitude").value;             lng = parsefloat(content);              position = {lat: lat, lng: lng};              new google.maps.marker({                 position: position,                 map: map             });              path = poly.getpath();             path.push(position);          }          position = {lat: lat1, lng: lng1};          path = poly.getpath();         path.push(position);      }      google.maps.event.adddomlistener(window, 'load', initialize);     google.maps.event.adddomlistener(window, 'click', placemarker);      function placemarker(position, map) {         if (clickmarker == 0) {             clickmarker = new google.maps.marker({                 position: position,                 map: map             });         } else {             clickmarker.setposition( position );         }     }        $("body").on("click", ".remove_agpoiwaypoint", function (e) {         e.preventdefault();      });      $("body").on("click", ".add_agpoiwaypoint", function (e) {         e.preventdefault();         var path = poly.getpath();         var position = clickmarker.getposition();         path.push(position);     });  }); 

when path = poly.getpath(); you're getting array , assigning variable called path. when path.push(position); you're merely adding things variable... it's not updating polyline's path.

instead need update polyline too, e.g.

poly.setpath(path);