title: Google Maps toggle button
body: <p>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. </p>
  
  <p>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. </p>
  
  <p><a href="http://www.mesquiteweather.net/wxgr3radar.php" rel="nofollow noreferrer">DEMO LINK</a></p>
  
  <p>Here is the code. The var radarButton and var satButton is the new ones. The ones below that is to the current buttons. </p>
  
  <pre><code>    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
              }
              },
              ],
  
          });
          wundermap.initialize();
      });
  </code></pre>
  
  <p>Here is the link to the code for the actual layer. The code is to long to post but the overlay is called Radar. </p>
  
  <p><a href="http://www.mesquiteweather.net/gmap/imap/wundermap.min.js" rel="nofollow noreferrer">RADAR CODE</a></p>