Google Maps - les contrôles disparaissent dans Firefox mais pas Internet Explorer 6

J'ai un bug Google Maps JavaScript que je ne peux pas comprendre. Le code fonctionne comme vous voyez les cartes sur la page, mais les contrôles semblent être "sous" les images de la carte, vous ne les voyez que sur le chargement de la page, et lorsque vous effectuez un zoom avant ou arrière rapidement.Google Maps - les contrôles disparaissent dans Firefox mais pas Internet Explorer 6

Désolé pour le simple dumping de code ici, mais honnêtement, je ne vois pas où le problème est.

J'ai essayé:

enlever le panorama streetview
enlever l'autre JavaScript sur la page
enlever tout cela, et en prenant le code marqueur, en laissant les cartes les plus simples embarqués (avec les contrôles)

Il semble toujours faire la même chose sur Firefox 3 et Chrome mais pas dans Internet Explorer 6. Pour une raison quelconque cela fonctionne bien.

Très étrange.

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

Source

2009-08-05 MrFidge

Avez-vous vérifié pour les erreurs avec Firebug (ou quelque chose)? Et pourriez-vous poster un lien vers la page? –

hiya, ouais pas d'erreurs dans Firebug ou la console d'erreur, ou dans la console de débogage IE6. Et non, désolé - c'est sur un environnement de test local, il n'y a pas de lien :( La page n'est pas quelque chose de complexe - juste un tas de html avec les 2 divs vides pour charger les cartes. – MrFidge

J'ai essayé de charger votre code dans une page et il a semblé fonctionner très bien. J'ai commenté les fonctions de supersleight - elles peuvent avoir quelque chose à voir avec ça. Si ce n'est pas le cas, vérifiez s'il y a des CSS sur la page qui pourraient interférer.

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

Source

2009-08-05 17:11:54

Merci Chris - J'ai fini par aller au fond des choses et c'était des problèmes de z-index! Vous aviez raison, la feuille de style était le problème;) – MrFidge

Google Maps - les contrôles disparaissent dans Firefox mais pas Internet Explorer 6

Répondre

Questions connexes