web-dev-qa-db-ja.com

ページの読み込み後にGoogleマップの外部JavaScriptを読み込むにはどうすればよいですか？

私の状況を説明するために、より多くの情報を提供します。 iOSに展開するためにPhoneGapでアプリケーションを構築しています。ユーザーが（ajaxを使用せずに）ナビゲートするビュー/ページがあり、必要なGoogleマップjsスクリプトをロードし、cordova位置情報APIを呼び出します。

私の問題は、Googleマップスクリプトの読み込みです。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX&sensor=true"></script>

ロードに時間がかかりすぎて、ページのレンダリングが最大3秒間停止します。ページが完全にレンダリングされるまで、外部スクリプトのロードを延期したいと思います。直前のページの下部にスクリプトを配置してもまったく役に立ちません。

GetScript（）を使用しようとしましたが、機能せず、デバッグコンソールで次のエラーがスローされます。

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

実際のスクリプトタグで 'defer'と 'async'を試しましたが、同じエラーがスローされます。外部JSファイルをロードする他の方法でも、同じエラーメッセージが表示されます。

この問題の可能な回避策はありますか。エラーステートメントの意味すらわかりません...

javascripthtmlgoogle-maps
30
Ryan Coolwebs

私はこの解決策を試してみましたが、うまくいきました。

Jqueryを使用して、dom readyでスクリプトを実行します。

基本的に、このように_function initialize_を使用する代わりに：

_function initialize(){
/*You code */
}
_

これを行う：

_$(function(){
/*You code */
})
_

google.maps.event.addDomListener(window, 'load', initialize);は不要です

もう。

編集＃1：現在、私はあなたのなじみのある問題に直面していますが、今はもっと良い解決策があると思います。

jSファイルで、initialize関数の後にこの関数を配置します。

_var ready: // Where to store the function

    ready = function() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'libraries=places&'+'callback=initialize';
      document.body.appendChild(script);
    };
_

基本的には、マップローダーを呼び出してから、ローダーの準備が整った後にマップを呼び出します
その後、これで書いた内容を利用します

あなたのhtmlページで：

_<script>
    $.getScript("You js file path",function(){
          $(document).ready(ready);
    });
</script>
_

そしてこれはスクリプトを取得し、その変数を使用できるようにし、DOMの準備ができてロードが完了した後に、必要な変数readyを呼び出します。

本文を閉じた後、これをhtmlページの下部に配置することをお勧めします。

13
Hamza Ouaghad

私は標準的なページ（問題ではなかった）またはbootstrap=モーダルでロードされ、このエラーで運がなかったモーダルのためにロードされる部分ビューでGoogleマップをロードしようとしました）：

「ドキュメント」で「書き込み」の実行に失敗しました。明示的に開かない限り、非同期で読み込まれた外部スクリプトからドキュメントに書き込むことはできません。

データモデルからマーカーを動的に呼び出しているため（または、少なくともまだ取得していないため）、スクリプトを使用していません。とにかく、ハムザのおかげで、私はこれを使って動作させることができました：

<div id="map-canvas" style="width:512px;height:464px;"></div>

@*<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>*@
    <script type="text/javascript">
    function initialize() {
        var mapDiv = document.getElementById('map-canvas');

        var mapOptions = {
            zoom: 1,
            minzoom: 1,
            mapTypeControl: true,
            zoomControl: true,
            scaleControl: true,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(mapDiv, mapOptions);

        //var markers = getMarkers(map);
        map.setCenter({ lat: 0, lng: 0 });

    };

    //google.maps.event.addDomListener(window, 'load', initialize);
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=initialize';
    document.body.appendChild(script);
</script>

もう1つの考えとして、モーダルからもフェードを削除する必要がありました。これは、実行を1秒遅らせる必要があるとコメントした他の誰かと相関しています。 resizetargetの修正も試してみましたが、運が悪かったのです。

これに関する多くの試行錯誤は、うまくいけば誰かの時間を節約します。

4
Sum None

// jQueryのgetScript関数を使用

$.getScript('[js containing the initialize function]',function(){
    $.getScript('https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize');
});

説明：

最初に、初期化関数を含む外部スクリプトをロードし、コールバック時に、コールバックが初期化に等しいGoogleマップAPIをロードします。

2
jroi_web