Как загрузить карты google на внешний javascript после загрузки страницы?

Я расскажу больше информации, чтобы объяснить мою ситуацию. Я создаю приложение с PhoneGap для развертывания на iOS. У меня есть представление/страница, на которую пользователь будет перемещаться (не используя ajax), который будет загружать нужные вам сценарии javascript javascript и делать вызов для привязки к кордове api.

Моя проблема в том, что загрузка карт google script:

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

Слишком много времени для загрузки и остановки страницы от рендеринга до почти 3 секунд. Я хочу отложить загрузку внешнего script до тех пор, пока страница не будет полностью отображена. Помещение script вниз в нижней части страницы перед этим не помогает вообще.

Я пытаюсь использовать 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.

Я попытался "отложить" и "асинхронно" в фактическом теге script, но это также вызывает такую же ошибку. Другие способы загрузки внешних JS файлов приземляются на меня с тем же сообщением об ошибке.

Существует ли какое-либо возможное решение этой проблемы. Я даже не знаю, что означает выражение ошибки...

Ответ 1

Я пробовал это решение и работал.

Запустите script на dom, используя jquery.

в основном вместо использования function initialize следующим образом:

function initialize(){
/*You code */
}

сделайте следующее:

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

И не нужно google.maps.event.addDomListener(window, 'load', initialize);

Anymore.

Изменить # 1: В настоящее время у меня есть некоторые знакомые проблемы, и я думаю, что теперь у меня есть лучшее решение.

в вашем JS файле, после функции инициализации, поставьте эту функцию:

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>

И это получает script, поэтому вы можете использовать его переменные, а затем вызвать переменную, которая вам нужна ready после того, как DOM будет готова и закончена загрузка.

Я рекомендую разместить это внизу страницы html после закрытия тела.

Ответ 2

Я пытался загрузить карты Google в частичном представлении, которое загружалось бы как стандартная страница (что не было проблемой) или загрузочный модальный, и не повезло с этой ошибкой (для модального):

не удалось выполнить 'write' в 'документе': невозможно написать в документ из асинхронно загруженного внешнего script, если только он явно открыт.

Я не использую скрипты, потому что я динамически вызываю маркеры из своей модели данных (или, по крайней мере, я еще не получил этого еще). В любом случае, благодаря Хамзе, я смог заставить ее работать с этим:

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

Еще одна мысль, я должен был удалить угасание из моего модального выражения, которое коррелирует с кем-то другим, комментируя, что им пришлось отложить выполнение на секунду. Я попробовал исправление resizetarget и все, что вам не повезло.

Множество проб и ошибок на этом, надеюсь, кого-то сэкономит.

Ответ 3

//Использование функции jQuery getScript

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

Пояснение:

Сначала загрузите внешний script содержащий функцию инициализации и после обратного вызова загрузите API карты google с обратным вызовом, равным инициализации.

Ответ 4

Вам нужно загрузить файл js после завершения тега body.