You just need to clear it:
map.overlayMapTypes.clear();
Or, you can pop the most recent:
map.overlayMapTypes.pop();
Or, if you have multiple layers, get the index of the one you want, and do:
map.overlayMapTypes.removeAt(index);
EDIT:
You probably need to replace the action with something 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 your page loads, if you open the console and run map.overlayMapTypes.length
it outputs 0; Once you hit radar it outputs 2 (not sure why it's not 1, but whatever). So what we do is check if it has a layer, if not, we do your normal code (since it should turn it on). If it already has one, we clear them. Your code may be different, I'm assuming this action is where you handle all clicks, if not, you may need to play around with it.
Last edit: if you get an error saying "about missing }" figure out where to put in a }.
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
});