30

手作りのフレームワークを使用して Google マップを非同期的に読み込むアプリを作成しています。
マップをロードすると、何らかの理由ですべてがロードされず、Uncaught TypeError: undefined is not a function. chrome インスペクタを確認したところgoogle.maps、有効なオブジェクトであることがわかりましたが、独自のプロパティはありません。ドキュメントがロードされた後、手動で「初期化関数」を呼び出します。私は何を間違っていますか?!

4

1 に答える 1

78

既知の URL ( http://maps.googleapis.com/maps/api/js?v=3&sensor=false )を使用して Maps-API 非同期をロードすることはできません。

スクリプト ファイルを見ると、これはロードされる API ではなく、API をロードするローダーであることがわかります。ローダーは を使用しdocument.write()ます。これは、ドキュメントが読み込まれた後に呼び出されると、予期しない結果につながります。

さらに、ドキュメントの onload イベントは、非同期にロードされたオブジェクトを待機しないため、速すぎる可能性があります。

また、スクリプトの load-event を使用して initialize-function を呼び出すこともできません。これは、起動時に maps-API ではなくローダーが読み込まれるためです。

対処方法:
スクリプト URL にコールバック パラメータを追加します (初期化関数の名前を値として)。

http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize

これで、次の別のローダーを取得できます。

  1. 使用しませんdocument.write()
  2. maps-API がロードされたときにコールバック関数 (initialize) を呼び出します

デモ: http://jsfiddle.net/doktormolle/7cu2F/

コメントに関連：コールバックは、ウィンドウに直接アタッチされた関数でなければならないようです。クールなグーグルではありません:)

別のオプションとして、 (関数名の代わりに) 関数参照の使用をサポートするgoogle-API-loaderがあります。

map-canvasmaps-API を非同期的に読み込みますが、ドキュメント内にID を持つ要素がある場合にのみ、マップを作成するサンプル:

    window.addEventListener('load',function(){
      if(document.getElementById('map-canvas')){
        google.load("maps", "3",{
          callback:function(){
             new google.maps.Map(document.getElementById('map-canvas'), {
                center: new google.maps.LatLng(0,0),
                zoom: 3
              });
          }
        });     
      }
    },false);
      body,html,#map-canvas{
        height:100%;
        margin:0;
        padding:0;
        width:100%;
      }
<script src="https://www.google.com/jsapi?.js"></script>
<div id="map-canvas"></div>

于 2013-01-06T19:23:44.073 に答える