Как загрузить google-карты api через usercript/синхронно?

Я пишу usercript (greasemonkey script), которому нужно добавить карту google на страницу на веб-сайте, который я не контролирую.

Я попытался добавить script так (что хорошо работает при загрузке других скриптов, которые я пробовал):

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 из usercript?

Ответы

Ответ 1

в соответствии с документами возможно загрузить только API за script
если вы не указали параметр callback
= > загружать API Карт Google асинхронно

У меня нет опыта написания сценариев, но я надеюсь, что это поможет.

ВНИМАНИЕ: Не забудьте добавить функцию обратного вызова в глобальное пространство имен.
(В простом JS вы добавите его в объект окна.)

Ответ 2

Вы должны добавить функцию обратного вызова к загрузке script. Если вы используете его в телефонном разговоре, вы должны проверить подключение к Интернету, а также если оно уже загружено. Юо может спросить, и я дам вам кусок кода.

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