Google Maps toggle layer

I have created a button to toggle my radar layer. By default when you load the page the layer is off. Which is what I want and works perfect. I hit the Radar button and the radar overlay comes on. That part works great too. Where my problem is when I got to hit it again to turn it off, it only goes off for a second and then comes right back on. What am I 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 is the current updated code I am using both for the button and the layer. It will come on but when I go to toggle it off it only goes off for a second then comes right back on.

/

/set up 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 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
});