Lazy loading google map api

Question

I want to lazy load all the 3rd party JS/CSS after my home page is displayed since the external plugins etc are used when user navigates away from home page onto some specific module.

So far I have succeeded for normal .js & .css external libraries thanx to http://wonko.com/post/lazyload-200-released

However this fails for a path like this http://maps.google.com/maps/api/js?sensor=true

Code:

   LazyLoad.js('http://maps.google.com/maps/api/js?sensor=true', function () {
   alert('Your JS has been loaded');
   });

I think the solution would be how to lazy-load web url?

Answer 1

I believe you want something like:

$.getScript('http://maps.google.com/maps/api/js?sensor=true');

using jQuery. The API will give details of the call back. Else Google may have some mechanism requiring it to be present from load. Just a guess.

Answer 2

Found a solution: Check the URL:'http://maps.google.com/maps/api/js?sensor=true' You would find main.js is being imported by it . A simple getScript for sensor=true will not give whole google object so next import also required.

  var t=setTimeout(function(){
    jQuery.getScript('http://maps.google.com/maps/api/js?sensor=true');
    jQuery.getScript('http://maps.gstatic.com/intl/en_us/mapfiles/api-3/10/20/main.js');
  },1000);