Ok let's start...
Table of Contents
- Introduction
- Preventing Memory Leaks - Attempt One
- Refining - Attempt Two
- The real deal - Attempt Three
- Conclusion
- Related Articles
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
- Create Zoomable Images Using The Google Maps API
- FIX: jQuery JSONP request to the Google Maps API Geo Service
- Beginning with jQuery - A Solid Foundation to Learn The Basics
- Google Maps API and jQuery - Tips to Avoid Using Both
- StackOverflow DevDays - (Talk 4 of 6) - jQuery
- Google Street View And Google Maps Interaction - Sample Showcase
- JSONP and Google Maps API Geocoder - Not a Bug
See ya
5 comments:
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
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
Hi Mike
thanks for the quick response, really appreciate that
Syl
I really appreciate your presence here too!
Mike
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);
Post a Comment