javascript - Why is my line not appearing on the map? -

i'm having problems google maps javascript api. basically, draw polyline , not have code within initialize function, have is:

function initialize() {             var mapoptions = {                 center: new google.maps.latlng(1.37, 103.814),                 zoom: 11             };             var map = new google.maps.map(document.getelementbyid('map-canvas'),                 mapoptions);         }          function test() {             var itwcoordinates = [                 new google.maps.latlng(1.1955, 103.566667),                 new google.maps.latlng(1.19875, 103.572333),                 new google.maps.latlng(1.188167, 103.660694),                 new google.maps.latlng(1.179444, 103.670722),                 new google.maps.latlng(1.130361, 103.740694),                 new google.maps.latlng(1.171444, 103.805),                 new google.maps.latlng(1.195972, 103.859833),                 new google.maps.latlng(1.20725, 103.88075),                 new google.maps.latlng(1.2695, 104.033333)             ];             var itwline = new google.maps.polyline({                 path: itwcoordinates,                 map: map,                 geodesic: true,                 strokecolor: '#777777',                 strokeopacity: 1.0,                 strokeweight: 1             });             itwline.setmap(map);             itwline.setvisible(true);         }         google.maps.event.adddomlistener(window, 'load', initialize); 

i have button on document call function test() upon clicking it, not seem work. doing wrong?

in general, ask how can draw shapes on map without including data in initialize function?

you missing store map, declare map global variables,

   var map;     function initialize() {           var mapoptions = {                center: new google.maps.latlng(1.37, 103.814),                zoom: 11           };           map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);     }