javascript - How change a path value after init Google Maps -

i have next code.

it's works, example in local of code when try change path "flightpath.strokeopacity = 0" dynamically doesn't show change.

i know how change dynamically path. function started when click on button.

function initialize() {   var mapoptions = {     zoom: 3,     center: new google.maps.latlng(0, -180),     maptypeid: google.maps.maptypeid.terrain   };    var map = new google.maps.map(document.getelementbyid('map-canvas'),       mapoptions);    var flightplancoordinates = [     new google.maps.latlng(37.772323, -122.214897),     new google.maps.latlng(21.291982, -157.821856),     new google.maps.latlng(-18.142599, 178.431),     new google.maps.latlng(-27.46758, 153.027892)   ];   var flightpath = new google.maps.polyline({     path: flightplancoordinates,     geodesic: true,     strokecolor: '#ff0000',     strokeopacity: 1.0,     strokeweight: 2   });    flightpath.setmap(map); }  google.maps.event.adddomlistener(window, 'load', initialize); 

1. use documented methods. change strokeopacity, use .setoptions:

   flightpath.setoptions({strokeopacity:0});

2. use variables in defined scope. use button click listener html, must in global scope. or use google.maps.event.adddomlistener in scope in defined.

working fiddle

function initialize() {    var mapoptions = {      zoom: 3,      center: new google.maps.latlng(0, -180),      maptypeid: google.maps.maptypeid.terrain    };      var map = new google.maps.map(document.getelementbyid('map-canvas'),      mapoptions);      var flightplancoordinates = [      new google.maps.latlng(37.772323, -122.214897),      new google.maps.latlng(21.291982, -157.821856),      new google.maps.latlng(-18.142599, 178.431),      new google.maps.latlng(-27.46758, 153.027892)    ];    var flightpath = new google.maps.polyline({      path: flightplancoordinates,      geodesic: true,      strokecolor: '#ff0000',      strokeopacity: 1.0,      strokeweight: 2    });      flightpath.setmap(map);    google.maps.event.adddomlistener(document.getelementbyid('hide'), 'click', function() {      flightpath.setoptions({        strokeopacity: 0      });    });    google.maps.event.adddomlistener(document.getelementbyid('show'), 'click', function() {      flightpath.setoptions({        strokeopacity: 1.0      });    });    }    google.maps.event.adddomlistener(window, 'load', initialize);

html,  body,  #map-canvas {    height: 500px;    width: 500px;    margin: 0px;    padding: 0px  }

<script src="https://maps.googleapis.com/maps/api/js"></script>  <div id="map-canvas" style="border: 2px solid #3872ac;"></div>  <input id="hide" type="button" value="hide" />  <input id="show" type="button" value="show" />