web-dev-qa-db-ja.com

ユーザースクリプトを介して/同期的にグーグルマップAPIをロードする方法は？

私が管理していないウェブサイトのページにグーグルマップを追加する必要があるユーザースクリプト（greasemonkeyスクリプト）を書いています。

私はそのようにスクリプトを追加しようとしました（これは私が試した他のスクリプトをロードするときにうまく機能します）：

var my_script = document.createElement('script');
my_script.setAttribute('src',
             'https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false');
document.head.appendChild(my_script);

しかし、これは次の場合に失敗します。

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.

ユーザースクリプトからマップAPIを読み込んで使用するにはどうすればよいですか？

javascriptgoogle-mapsgoogle-maps-api-3userscripts
13
GJ.

ドキュメントによると、スクリプトごとにAPIをロードすることしかできません
パラメータcallbackを指定しない限り
=> Google Maps APIを非同期でロード

ユーザースクリプトを書いた経験はありませんが、お役に立てば幸いです。

注意：コールバック関数をグローバル名前空間に追加することを忘れないでください。
（プレーンJSでは、ウィンドウオブジェクトに追加します。）

6
DoubleU23

スクリプトの読み込みにコールバック関数を追加する必要があります。 phonegapで使用している場合は、インターネット接続を確認する必要があります。また、すでに読み込まれているかどうかも確認してください。 Yuoが質問できます。コードをお渡しします。

<!DOCTYPE html>
<html>
  <head>
    <title>Asynchronous Loading</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script>
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

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

window.onload = loadScript;

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
2
Gonzalo

次のように、'async'属性をmy_scriptに追加してみてください。

my_script.setAttribute('async',true);

また、これを見ることができます： https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch

0
abmd