Карты Google — элементы управления исчезают в Firefox, но не в Internet Explorer 6

У меня есть ошибка JavaScript Карт Google, которую я не могу понять. Код работает так, как будто вы видите карты на странице, но элементы управления кажутся «под» изображениями карты, вы видите их только при загрузке страницы и при быстром увеличении или уменьшении масштаба.

Извините, что просто выбрасываю сюда код, но я, честно говоря, не понимаю, в чем проблема.

Я пробовал:

  1. удаление панорамы улиц
  2. удаление другого JavaScript на странице
  3. удалив все это и убрав код маркера, оставив самые простые карты встроенными (с элементами управления)

Кажется, что всегда происходит одно и то же в Firefox 3 и Chrome, но НЕ в Internet Explorer 6. По какой-то причине это работает нормально.

Очень странно.

<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>

google-maps javascript api
person MrFidge    schedule 05.08.2009    source источник
comment
Вы проверяли наличие ошибок с помощью Firebug (или чего-то еще)? А можно ссылку на страницу?   -  person Chris B    schedule 05.08.2009
comment
Привет, да, никаких ошибок ни в Firebug, ни в консоли ошибок, ни в консоли отладки IE6. И нет, извините - это в локальной тестовой среде, ссылки нет :( Страница не представляет собой ничего сложного - просто куча html с 2 пустыми div для загрузки карт.   -  person MrFidge    schedule 05.08.2009

Ответы (1)


arrow_upward
1
arrow_downward

Я попытался загрузить ваш код на страницу, и, похоже, он работал нормально. Я закомментировал функции supersleight — возможно, они как-то связаны с этим. Если нет, проверьте, есть ли на странице какой-либо CSS, который может мешать.

Вот моя страница:

<!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>
person Chris B    schedule 05.08.2009
comment
Спасибо, Крис - в конце концов я докопался до сути, и это были проблемы с z-индексом! Вы были правы, проблема была в таблице стилей ;) - person MrFidge; 07.08.2009