Cannot add Google Map API script after pageload

Question

Due to some limitations, I cannot have the script tag for the Google Map API available on page load. I have tried adding the script to the page many different ways, including using jQuery to add a script tag like so:

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

I have also tried to include it in a more manual way, like so:

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

Both of these examples cause the entire page to become white and blank. Any thoughts on how I can do this?

Answer 1

This is what worked for me (following JAM's comment) - just run function after page load

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

If you look at the JavaScript returned by the URL you're trying to load from Google, you'll see it contains a document.write() statement:

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

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

document.write() is a command that's only available during page load. It cannot be called afterwards, or you will experience those results that you mention. Google doesn't want you to load this particular script after the page load.

Dare I say it? Perhaps you need to inject an iframe that points to a page with the google maps code setup so document.write() can work as they designed it.

Answer 3

I belive Fabio Pozzi's answer is the correct solution to this, in addition to his answer here is a snippet of code using jQuery.getScript to load both the google api loader and maps.

            // load the google api loader
            if( typeof(google) == 'undefined' || !google.load ) {
                $.getScript( '//www.google.com/jsapi', function() {
                    loadMaps();
                });
            }

            // otherwise just load maps
            else {
                loadMaps();
            }

            // load the google maps api
            function loadMaps() {
                google.load("maps", "3", {
                    callback: initMap,
                    other_params: 'sensor=true'
                });
            }

Answer 4

I will answer even if the question is a bit old. I think you should use the google api

google.load

following this documentation google api loader. To do this you need a google api key and you need to include the script to use them in your page source. After that you can use a callback to load the map.

Answer 5

I do realize that this is old question but the following solution works for me: Then adding script to page you should provide callback parameter and then lazy loading and inclination works for Google Maps. Here follows the example:

 $('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 () {
 }