API Google Maps et Internet Explorer 8/9

Pour une raison quelconque, une carte Google via l'API Javascript ne se charge pas correctement dans Internet Explorer.API Google Maps et Internet Explorer 8/9

Il affiche dans Google Chrome & Firefox absolument bien.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Google Maps</title> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
     <link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
     <style> 
      #map_canvas {font: 12px Arial, Helvetica, sans-serif; color:#3B3B3B; height:400px; width: 700px;} 
      .text {text-align:center; color:#3B3B3B;} 
     </style> 
     <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script> 
     <script type="text/javascript"> 
      var geocoder; 
      var map; 

      function initialize() { 
      geocoder = new google.maps.Geocoder(); 
      var latlng = new google.maps.LatLng(-34.397, 150.644); 
      var myOptions = { 
       zoom: 15, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      } 

      function codeAddress() { 
      var address = '50 Bond Street, London'; 
      geocoder.geocode({ 'address': address}, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 
       } else { 
      //Not Found 
       } 
      }); 
      } 
     </script> 
     <script type="text/javascript"> 
      initialize(); 
      codeAddress(); 
     </script> 
    </head> 
    <body onload="initialize(); codeAddress();"> 
     <div id="map_canvas"></div> 
    </body> 
</html>

Étrangement si je mets un onmouseover sur le corps et appeler les fonctions qu'il semble commencer à travailler à nouveau? Mais il recharge évidemment les cartes à chaque fois!

Source

2011-07-18 techco1

Je vois que vous appelez vos fonctions depuis l'événement body onload. Peut-être que les scripts ne sont pas chargés correctement à ce moment-là?

Essayez de charger l'API de cette façon. Vous pouvez charger l'API de manière ascynchrone et spécifier une fonction de rappel pour initialiser le contenu.

<script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7Bmodules%3A%5B%7Bname%3A%22maps%22%2Cversion%3A3%2Cother_params%3A%22sensor%3Dfalse%22%7D%5D%7D"></script> 
<script type="text/javascript"> 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 

    google.setOnLoadCallback(initialize); 
</script>

[modifier] La solution précédente ne fonctionnait pas. La vraie solution est dans les commentaires, je la mets simplement ici]

Source

2011-07-18 16:20:18 boulaycote

Salut Maxime, Ça revient avec une erreur. Je pense que c'est parce qu'il ne peut pas ajouter l'étiquette avant que le corps ne soit chargé. Il revient avec une erreur NULL. – techco1

Je pense qu'il vaut la peine de noter que cela est appelé à partir d'une autre page qui a un iFrame. Je pense que cela pourrait être derrière le problème. – techco1

Le fait que si vous liez vos fonctions sur un événement mouseover qui se produit après le chargement de la page fait que tout fonctionne, c'est ce qui me fait penser que les scripts ne sont pas chargés correctement sur IE onload event. Le chargement de l'API async devrait résoudre le problème car vous pouvez fournir une méthode de rappel pour initialiser vos composants. J'utilise cette méthode pour charger des cartes dans mes projets [Autoload] (http://gmaps-samples-v3.googlecode.com/svn/trunk/commonloader/autoload.html) – boulaycote

API Google Maps et Internet Explorer 8/9

Répondre

Questions connexes