Sunday, October 18, 2009

Google Maps API and jQuery - Memory Leaks Revisited

The Google Maps API v2 has been around for a while and even though v3 is out, I still use it myself. The main reason is that there's no driving directions on v3. Anyway, v3 has a brand new architecture (MVC) and this post doesn't apply to it.

Ok let's start...

Table of Contents



Introduction


Today I'll show you how to prevent javascript memory leaks from happening when you use the Maps API v2. We will use jQuery to help us catch DOM events. If you don't know what jQuery is, you're missing something.

Preventing Memory Leaks - Attempt One


Google provides the GUnload function to clean objets in memory. It is documented here. Google recommends to call GUnload when the page unloads:

<body onunload="GUnload()">

This technique works well on a "per page" basis... but if you're using Maps often in you website, you have to remember to put the cleanup tag on every page using Maps.

Refining - Attempt Two


In my websites, I always have a javascript library included by every page. Why not take advantage of that? We could then call GUnload there... no more individual pages to track:

$(window).bind("unload", GUnload);

Notice jQuery's bind method. What it does is the exact same thing as Attempt one, but we moved the code from each page to a single place in a global library.

One drawback is that if the Maps API is not loaded by a page, a javascript error will occur when the page unloads.

The real deal - Attempt Three


So we now have a problem when a particular page doesn't load Maps API... let's fix it:

$(window).bind("unload", function() {
    if (typeof GUnload == "function") {
        GUnload();
    }
});

The cleanup method is now more intelligent. It works on the premise that if a function with the name GUnload exists, then the Google Maps API has been loaded by the page. We then call GUnload accordingly!

Third time's the charm!

Conclusion


We already covered some of the advantages of using the third attempt, let's repeat them all and add some more. The third attemp shows that...

  • You don't have to track down every page that uses Maps API to alter the body tag
  • You are sure the cleanup function will be called on every page
  • Pages not using Maps API won't break
  • Pages loading Maps API on user request will be properly cleaned (Sometimes, the exact same page can load the Maps API, sometimes not)
  • Websites with Maps embedded in modules, themes or master pages will also be cleaned up

So, we looked at how we can efficiently prevent memory leaks when using Maps API v2 with jQuery. I hope you liked the article.

I'm putting time and effort on this blog and having you here is my reward. Make me feel better and better everyday by spreading the love with the buttons below! Also, don't hesitate to leave a comment. Thanks for reading!

Related Articles



See ya

5 comments:

Anonymous Avatar Anonymous said...

Hi Mike
So we are facing this memory leak issue with version 3. You had specifically stated that the fix was for v2 only. any suggestions
thank u
syl

Unknown said...

Well,

This can be a more general memory leak issue.

You know, jQuery is a well known library but if you don't use it properly, you can have memory leaks with it as well.

As for Maps API v3 specifically, I don't know. Google doesn't provide a cleanup function so maybe the library isn't known to leak. But how it's used is another thing. I'm not telling you that your code leaks, I just don't know :)

What I do know is that memory leaks can occur in various scenarios: circular references, closures, bugs in browsers, etc..

The following links might get you started to understand and track down javascript memory leaks (don't forget to use a browser extension to detect them):

http://www.ibm.com/developerworks/web/library/wa-memleak/

http://javascript.crockford.com/memory/leak.html

http://geekswithblogs.net/FrostRed/archive/2008/11/29/127440.aspx

http://talideon.com/weblog/2005/03/js-memory-leaks.cfm

Keep us informed on your progress and thank you for reading!

Mike

Anonymous Avatar Anonymous said...

Hi Mike

thanks for the quick response, really appreciate that

Syl

Unknown said...

I really appreciate your presence here too!

Mike

Anonymous Avatar Anonymous said...

Hi Mike

So removed all js, had a simple jsp with a call to google streetview. So anytime we refresh it makes a call and
looks like it injects about 40 divs into the div specified.

So I really think that the google while injecting divs create a lot js objects which the browser does not seem to clean up. Any ideas or suggestions.

thank you
syv
var panorama = new google.maps.StreetViewPanorama(document.getElementById(id), panoOptions);

©2009-2011 Mike Gleason jr Couturier All Rights Reserved