0

何らかの理由で、Javascript API経由のGoogleマップがInternet Explorerで正しく読み込まれていません。Google Maps APIとInternet Explorer 8/9

Google Chromeに表示されます& Firefoxは大丈夫です。

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

私はonmouseoverをBodyに配置して関数を呼び出すと、もう一度作業を開始するように見えますか?しかし、それは明らかに毎回地図をリロードします!

答えて

0

body onloadイベントから関数を呼び出しています。スクリプトはその時点で正しく読み込まれていない可能性がありますか?

この方法でAPIをロードしてみてください。非同期的にAPIをロードし、コンテンツを初期化するためのコールバック関数を指定します。

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

[編集:以前の解決策は機能しませんでした。実際の解決策はコメントにあります、私は単にここに入れてください]

+0

こんにちはMaxime、それはエラーで戻ってきます。私はそれがボディがロードされるまでタグを付加できないからだと思う。それはNULLエラーで戻ってきます。 – techco1

+0

私はこれがiFrameを持つ別のページから呼び出されていることに注目する価値はあると思います。私はこれが問題の背後にあるかもしれないと思う。 – techco1

+0

ページの読み込み後に発生するmouseoverイベントで関数をバインドすると、すべての作業が行われるため、IE onloadイベントでスクリプトが正しく読み込まれないと思うのです。 APIを非同期に読み込むと、コンポーネントを初期化するためのコールバックメソッドを提供できるので、この問題を修正する必要があります。私はこの方法を使って自分のプロジェクトの地図を読み込んでいます[Autoload](http://gmaps-samples-v3.googlecode.com/svn/trunk/commonloader/autoload.html) – boulaycote