Goolge Maps toggle button

Goolge Maps toggle button

I have been struggling with this all day. I have made new buttons to actually go on my map that match the Google Maps buttons sit on the map better. I have been trying to get them to work with the current buttons above the map so I can remove those but I can't seem to get them to work. What am I missing.
Here is a link to the page so you can see. The buttons above the map work and I am going to remove them. The buttons on the map don't work which I am trying to get to work.
DEMO LINK
Here is the code. The var radarButton and var satButton is the new ones. The ones below that is to the current buttons.
    jQuery(document).ready(function($) {
        var mapTypeId = wundermap.getMapTypeId("hyb");
        var googlemap = new google.maps.Map($("#map")[0], {
            center: new google.maps.LatLng(32.782878, -96.609862),
              panControl: false,
              zoom: 6,
              mapTypeId: mapTypeId,
              mapTypeControl: true,
              mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL,
          position: google.maps.ControlPosition.RIGHT_TOP
        },
    });

    var radarOptions = {
        gmap: googlemap,
        name: 'Radar',
        position: google.maps.ControlPosition.TOP_RIGHT,
        action: function(){
                if (wundermap.map.overlayMapTypes.length==0) {
                  wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
                  wundermap.map.overlayMapTypes.setAt("1",Radar);
                }
                else {
                    wundermap.map.overlayMapTypes.clear();
                }

            }
}
var radarButton = new buttonControl(radarOptions);

var satOptions = {
        gmap: googlemap,
        name: 'Satellite',
        position: google.maps.ControlPosition.TOP_RIGHT,
        action: function(){
                if (wundermap.map.overlayMapTypes.length==0) {
                  wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
                  wundermap.map.overlayMapTypes.setAt("1",Satellite);
                }
                else {
                    wundermap.map.overlayMapTypes.clear();
                }

            }
}
var satButton = new buttonControl(satOptions);

        wundermap.setOptions({
            map: googlemap,
            refreshPeriod: 60000,
            units: "english",
            debug: 0,
            source: "wxmap",
            StreetsOverlay: true,
            layers: [
            {
            layer: "Radar",
            active: "on",
            opacity: 70,
            type: "N0R",
            type2: "",
            animation: {
            num: 6,
            max: 10,
            delay: 25
            },
            stormtracks: "off",
            smooth: "on",
            subdomain: "radblast-aws"
            },
            {
            layer: "Satellite",
            defaultUI: 0,
            opacity: "85",
            source: "",
            active: "off",
            animation: {
            num: 1,
            max: 8,
            delay: 25