ansaurus

Question

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

Answer 1

+1 A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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"&gt;&lt;/script&gt;
    <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>

Chris B 2009-08-05 17:11:54

Thanks Chris - I eventually got to the bottom of it and it was z-index problems! You were right, the stylesheet was the problem ;)

hfidgen 2009-08-07 14:30:46

ansaurus

tags:

views:

answers:

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

related questions