CODEWITHSUNDEEP
javascriptapigoogle-maps
MrFidge
MrFidge

Reputation: 2105

Google Maps - controls disappear in Firefox but not Internet Explorer 6

I've got a Google Maps JavaScript bug which I can't get to the bottom of. The code works 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.

Sorry for just dumping code here, but I honestly can't see where the issue is.

I've tried:

  1. removing the streetview panorama
  2. removing the other JavaScript on the page
  3. removing all that, and taking out the marker code, leaving the most simple maps embedded (with controls)

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.

Very odd.

<script type="text/javascript">
    <!--
    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);
    //-->
</script>

Upvotes: 0

Views: 1789

Answers (1)

Chris B
Chris B

Reputation: 15834

I tried loading your code into a page and it seemed to work just fine. I did comment out the supersleight functions - they may have something to do with it. If not - check to see if there's any CSS on the page which might be interfering.

Here's my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps Test</title>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
    <script type="text/javascript">
        <!--
        //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);
        //-->         
    </script>
</head>
<body>
    <div id="map" style="width: 500px; height: 300px"></div>
    <div id="banner" style="width: 500px; height: 300px"></div>
</body>
</html>

Upvotes: 1

Related Questions