javascript - Google Maps toggle layer -

i have created button toggle radar layer. default when load page layer off. want , works perfect. hit radar button , radar overlay comes on. part works great too. problem when got hit again turn off, goes off second , comes right on. missing?

var radaroptions = {                 gmap: map,                 name: 'radar',                 position: google.maps.controlposition.top_right,                 action: function(){                      map.overlaymaptypes.push(null); // create empty overlay entry                     map.overlaymaptypes.setat("1",tilenex);                   }         }         var radarbutton = new buttoncontrol(radaroptions); 

demo map

edit:

here current updated code using both button , layer. come on when go toggle off goes off second comes right on.

/

/set custom buttons         var radaroptions = {                 gmap: map,                 name: 'radar',                 position: google.maps.controlposition.top_right,                 action: function(){                      map.overlaymaptypes.push(null); // create empty overlay entry                     map.overlaymaptypes.setat("1",tilenex);                   }         }         var radarbutton = new buttoncontrol(radaroptions);             tilenex = new google.maps.imagemaptype({             gettileurl: function(tile, zoom) {                 return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new date()).gettime();              },             tilesize: new google.maps.size(256, 256),             opacity:0.70,             name : 'nexrad',             ispng: true         });         

you need clear it:

map.overlaymaptypes.clear(); 

or, can pop recent:

map.overlaymaptypes.pop(); 

or, if have multiple layers, index of 1 want, , do:

map.overlaymaptypes.removeat(index); 

edit:

you need replace action like:

action: function(){                  if (map.overlaymaptypes.length==0) {                   map.overlaymaptypes.push(null); // create empty overlay entry                   map.overlaymaptypes.setat("1",tilenex);                  }                 else {                     map.overlaymaptypes.clear();                 }              } 

i know when page loads, if open console , run map.overlaymaptypes.length outputs 0; once hit radar outputs 2 (not sure why it's not 1, whatever). check if has layer, if not, normal code (since should turn on). if has one, clear them. code may different, i'm assuming action handle clicks, if not, may need play around it.

last edit: if error saying "about missing }" figure out put in }.

var radaroptions = {         gmap: map,         name: 'radar',         position: google.maps.controlposition.top_right,         action: function(){                  if (map.overlaymaptypes.length==0) {                   map.overlaymaptypes.push(null); // create empty overlay entry                   map.overlaymaptypes.setat("1",tilenex);                  }                 else {                     map.overlaymaptypes.clear();                 }              } } var radarbutton = new buttoncontrol(radaroptions);  tilenex = new google.maps.imagemaptype({     gettileurl: function(tile, zoom) {         return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new date()).gettime();      },     tilesize: new google.maps.size(256, 256),     opacity:0.70,     name : 'nexrad',     ispng: true });