0

My website loads the google maps api when I click on the location tab, then initializes the map. I don't want to load the api before this tab is clicked. I noticed it loaded the api every time I clicked the tab (causing memory usage for the site to increase). The if/else statement I wrapped it in doesn't work in a click() function. I'm also loading the api and my mapconstructor.js asynchronously as per https://stackoverflow.com/a/11803418/4184379. I've checked the similar answers on if/else not working in a click, but they haven't helped.

$("[id=location-tab]").click(function() {  
  if (typeof google.maps.event.trigger == 'undefined') {
    $.when(
      $.getScript("https://maps.googleapis.com/maps/api/jsv=3.exp&sensor=false&callback=initialize" ),
      $.getScript( "assets/js/gmap.js" ),
      $.Deferred(function( deferred ) {
        $( deferred.resolve );
      })
    ).done(function() {
      initialize();
    });
  }
  else {
    google.maps.event.trigger(map_canvas, 'resize');
  }
});
Community
  • 1
  • 1
Hunslet Carr
  • 1
  • 1
    For what it's worth, it'd be more accurate to say something like "a condition I wrote is not evaluating like I expected it to" rather than "a fundamental part of a major programming language is not working correctly". – Rex M Oct 27 '14 at 02:33
  • `google, google.maps, google.maps.event` all could be also undefined... also when you get the if right, you keep clicking on the tab and it will keep requesting scripts until intialization is over. You need a different logic here. look into `require.js`? – Alex Pakka Oct 27 '14 at 02:36
  • Yes I was assuming it was my code rather than a bug. Apologies @RexM I should have expressed it like you said. – Hunslet Carr Oct 27 '14 at 02:38
  • @AlexPakka I was hoping to avoid it seeing as this is the only thing I'd need it for, but I will look into it. Thank you. – Hunslet Carr Oct 27 '14 at 02:48
  • I'm not a rocket scientist in javascript but could it be as simple as your 'undefined' being quoted which would make it a comparison to the string called "undefined" as opposed to the JavaScript constant of 'undefined'? – Kolban Oct 27 '14 at 03:32
  • AlexPakka thanks for the require.js suggestion, I implemented a very simple solution with it. I did go back and fix up this one as well though (couldn't handle needing require and the async plugin for just one function) and found out from other answers on here that I need to use "if(window.google === undefined" rather than "typeof". Also there was a typo in the maps api url and the error @Kolban mentioned (thanks). Not sure what you mean by "it will keep requesting scripts" though? As far as I can see jquery.when will fetch and run them once before running initialize once. – Hunslet Carr Oct 27 '14 at 04:25
  • @AndrewWright, I put my suggestions into the answer. Look at the usage of 'libraryIsLoading' - if it takes time on the slower connection, `window.google` will be undefined until done, and there is a chance you will load scripts twice. Not a big issue, bit it might turn into errors. – Alex Pakka Oct 29 '14 at 17:58

2 Answers2

0

Did you check if you are doing $("[id=location-tab]").click(function() {... on dom-ready? Because it also seems strange you're added a deferred that resolves on dom-ready to your when call. It should resolve fine, but it makes it seem like you're adding the on-click before dom-ready.

hlfcoding
  • 2,532
  • 1
  • 21
  • 25
0

There are two problems. One is with determining the availability of the library, the if will throw an exception if e.g. google is undefined. Generally speaking, following code is more robust:

if (window.google && window.google && window.google.maps &&...) {
   google.maps.event.trigger(map_canvas, 'resize');
} else {
   if (!libraryIsLoading) { //needs to be defined somewhere in global scope...
     libraryIsLoading = true; 
     //load library here
   }
}

This if is evaluated left to right, so it elimnates a chance for exception. However, loading the library correctly is quite tricky. In most cases it is worth it to use require.js or, if you look for smaller size library, take a look at curl.js

I would go with curl or require or any of the alternatives instead of writing my own code simply because I would definitely use it in other parts of the project: it provides a way to organize the code and make it future proof.

Alex Pakka
  • 9,466
  • 3
  • 45
  • 69