Не удается добавить скрипт Google Map API после загрузки страницы

Question

Из-за некоторых ограничений у меня не может быть тега скрипта для Google Map API, доступного при загрузке страницы. Я пытался добавить скрипт на страницу разными способами, включая использование jQuery для добавления тега скрипта следующим образом:

$('head').append('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>');

Я также попытался включить его более ручным способом, например:

var script = document.createElement("script");
script.src = 'http://maps.google.com/maps/api/js?sensor=false';
script.type = "text/javascript";
document.head.appendChild(script);

В обоих этих примерах вся страница становится белой и пустой. Есть мысли о том, как я могу это сделать?

Answer 1

Это то, что у меня сработало (после комментария JAM) - просто запустите функцию после загрузки страницы

function writeGoogleMapsScript()
{
        document.oldWrite = document.write; 
        document.write = function(text)
        {                                 
            var parser = new DOMParser();
            var element = parser.parseFromString(text, "text/xml");           
            var child = element.firstChild;                
            var element = document.createElement("script");
            element.src = child.getAttribute('src');
            element.type= "text/javascript";            
            document.getElementsByTagName("head")[0].appendChild(element);                          
            document.write = document.oldWrite;
        };                         
        var element = document.createElement("script");
        element.src = "http://maps.google.com/maps/api/js?sensor=true&language=iw";
        element.type= "text/javascript";            
        document.getElementsByTagName("head")[0].appendChild(element);  
}

Answer 2

Если вы посмотрите на JavaScript, возвращаемый URL-адресом, который вы пытаетесь загрузить из Google, вы увидите, что он содержит инструкцию document.write ():

http://maps.google.com/maps/api/js?sensor=false

function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
}

document.write () - это команда, которая доступна только при загрузке страницы. Это не может быть вызвано впоследствии, или вы испытаете те результаты, которые вы упоминаете. Google не хочет, чтобы вы загружали именно этот скрипт после загрузки страницы.

Смею ли я сказать это? Возможно, вам нужно внедрить iframe, который указывает на страницу с настройкой кода Google Maps, чтобы document.write () мог работать так, как они его разработали.

Answer 3

Я верю, что ответ Фабио Поцци - правильное решение, в дополнение к его ответу здесь приведен фрагмент кода, использующий jQuery.getScript для загрузки как google api loader, так и карт.

Answer 4

Я отвечу, даже если вопрос немного устарел.Я думаю, что вы должны использовать Google API

google.load

, следуя этой документации Google API загрузчик .Для этого вам нужен ключ API Google, и вам нужно включить сценарий, чтобы использовать их в исходной странице.После этого вы можете использовать обратный вызов для загрузки карты.

Answer 5

Я понимаю, что это старый вопрос, но мне подходит следующее решение: Затем, добавив скрипт на страницу, вы должны указать параметр callback, а затем ленивая загрузка и наклон работают для Карт Google.Вот следующий пример:

 $('body').append('<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=XXX-YYYY-ZZZ&sensor=false&callback=initializeGoogleMaps"></script>');
 window.initializeGoogleMaps = function () {
 }