从.load（）jQuery函数省略Google Maps

Question

I need the pages of a site to be fully loaded before showing, so I have used .load() jquery function to show an animated gif whilst loading. My problem is that Google maps is taking a while to load and so I need to omit it from the .load() function, but am not sure about how to do it. Any help would be appreciated.

<iframe src="This-is-the-google-maps-reference" width="100%" height="300" frameborder="0" style="border:0"></iframe>

<script src="js/jquery.js"></script>
<script type="text/javascript">

$(window).load(function() {
   $(".loader").fadeOut("slow");
}); 
</script>

css:

loader {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background:url("http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_21.gif") no-repeat center center rgba(255,256,255,1.0)
}

Answer 1

check both page load and map load to fire fadeout method. If page is loaded first, a flag is set. then this flag will be checked on map load. if map is loaded first, vica versa.

var mapLoaded; 
var pageLoaded;

$(window).load(function() {
    if(mapLoaded)
    $(".loader").fadeOut("slow");
    else
    pageLoaded = 1;
}) 

google.maps.event.addListenerOnce(map, 'idle', function(){
    if(pageLoaded)
    $(".loader").fadeOut("slow");
    else
    mapLoaded = 1;
});