title: Google Maps - controls disappear in Firefox but not Internet Explorer 6
body: <p>I've got a Google Maps JavaScript bug which I can't get to the bottom of. The code <em>works</em> as in you see the maps on the page, but the controls seem to be "under" the map images, you only see them on page load, and when you zoom in or out quickly.</p>
  
  <p>Sorry for just dumping code here, but I honestly can't see where the issue is.</p>
  
  <p>I've tried:</p>
  
  <ol>
  <li>removing the streetview panorama</li>
  <li>removing the other JavaScript on the page</li>
  <li>removing all that, and taking out the marker code, leaving the most simple maps embedded (with controls)</li>
  </ol>
  
  <p>It always seems to do the same thing on Firefox 3 and Chrome but NOT in Internet Explorer 6. For some reason that just works fine.</p>
  
  <p>Very odd.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      &lt;!--
      var $j = jQuery.noConflict();
      $j('#logo').supersleight();
      $j('#col2_2_overlay').supersleight();
      $j('#bookmark').supersleight();
      google.load("maps", "2.x");
      // Call this function when the page has been loaded
      function initcf() {
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GSmallMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng(51.478804, -0.215886), 15);
          // Create our "tiny" marker icon
          var tinyIcon = new GIcon();
              tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
              tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
              tinyIcon.iconSize = new GSize(12, 20);
              tinyIcon.shadowSize = new GSize(22, 20);
              tinyIcon.iconAnchor = new GPoint(6, 20);
              tinyIcon.infoWindowAnchor = new GPoint(5, 1);
              // Set up our GMarkerOptions object
              markerOptions = { icon:tinyIcon };
          var point = new GLatLng(51.479018, -0.215178);
          map.addOverlay(new GMarker(point, markerOptions));
      }
      function initcf1() {
          var myPano = new GStreetviewPanorama(document.getElementById("banner"));
          contentformula = new GLatLng(51.479018, -0.215178);
          myPOV = {yaw:378.64659986187695, pitch:-7};
          myPano.setLocationAndPOV(contentformula, myPOV);
          GEvent.addListener(myPano, "error", handleNoFlash);
      }
      function handleNoFlash(errorCode) {
        if (errorCode == 603) {
          initcf_backup();
          return;
        }
      }
      function initcf_backup() {
          var map_a = new GMap2(document.getElementById("banner"));
          map_a.addControl(new GLargeMapControl());
          map_a.setMapType(G_SATELLITE_MAP);
          map_a.setUIToDefault();
          map_a.setCenter(new google.maps.LatLng(51.478804, -0.215886), 18);
          // Create our "tiny" marker icon
          var tinyIcon_a = new GIcon();
              tinyIcon_a.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
              tinyIcon_a.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
              tinyIcon_a.iconSize = new GSize(12, 20);
              tinyIcon_a.shadowSize = new GSize(22, 20);
              tinyIcon_a.iconAnchor = new GPoint(6, 20);
              tinyIcon_a.infoWindowAnchor = new GPoint(5, 1);
              // Set up our GMarkerOptions object
              markerOptions_a = { icon:tinyIcon_a };
          var point_a = new GLatLng(51.479018, -0.215178);
          map_a.addOverlay(new GMarker(point_a, markerOptions_a));
      }
      google.setOnLoadCallback(initcf);
      google.setOnLoadCallback(initcf1);
      //--&gt;
  &lt;/script&gt;
  </code></pre>