$getScript Method to load google maps api -> blank page?

Question

I have a little button on my page that should load a google map. Since I want my page to load really fast and this feature is not actually necessary I don't want to embed the google maps API script on page-load. I just want to load it when the button is actually clicked.

I tried using the jquery $.getScript() method, however if I'm using the code above I'm getting a blank page. The page starts loading and as soon as my javascript file gets executed the page is blank (white).

$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
    $('#googleMap').live('click', function(e) {

        e.preventDefault();
        loadMap("mapBottomContainer", false);

    });
});

What am I doing wrong here?

edit/update:

Doesn't seem to make a difference if I do this:

$('#googleMap').live('click', function(e) {

    $.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){

        e.preventDefault();
        loadMap("mapBottomContainer", false);

    });

});

The page doesn't get blank on page-load however as soon as I click on the maps-button the page gets whitened.

update 2:

the loadMap function:

function loadMap(cont, scroll) {

    var latlng = new google.maps.LatLng(47.244236,11.249194);
    var options = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: scroll,
        streetViewControl: false,
        navigationControlOptions: {  
            style: google.maps.NavigationControlStyle.SMALL 
        }
    }

    var map = new google.maps.Map(document.getElementById(cont), options);

    var mapdesc = '<div id="gmContent">'+
    '<h3 id="gmTitle" class="widget-title">Something</h3>'+
    '<div id="gmBody">'+
    '</div>'+
    '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: mapdesc
    });

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'My Title'
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });

    infowindow.open(map,marker);

}

What is the `loadMap` function? Is it part of google maps or your own function? — Nalum, May 06 '11 at 08:10
updated my question with the loadMap function. If I load it on pageload in my `` tag like this ``it works just fine. — matt, May 06 '11 at 08:14
Just use $.getJSON: http://stackoverflow.com/questions/2811787/jquery-how-can-i-load-the-google-maps-api-via-ajax — DedMorozzz, Jun 10 '14 at 12:10

score 8 · Answer 1 · answered May 06 '11 at 08:57

8

The problem here is the google map api js link you are loading uses document.write to add additional script tags to the page. That makes what you trying to do impossible since it will override the page content.

answered May 06 '11 at 08:57

epascarello

204,599
20
195
236

Ok, I see. Is there any other chance to load this script just when it's needed? e.g. like appending it to the head tag or so? – matt May 06 '11 at 09:41
You can not add that js file to the page after it has loaded in any manner since it will always fire that document.write. – epascarello May 06 '11 at 09:44

score 0 · Accepted Answer · answered May 06 '11 at 08:42

0

The js script is loaded successfully:

alert(window.google);   // before load undefined
$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
    alert(window.google); // after load [object Object]
});

However, it seems that google.maps doesn't have some property you're calling in loadMap, for example google.maps.LatLng.

answered May 06 '11 at 08:42

wong2

34,358
48
134
179

`google.maps.LatLng` is an object "type", if memory serves. It should be OK as written. – Lightness Races in Orbit May 06 '11 at 08:54

$getScript Method to load google maps api -> blank page?

2 Answers2