Benchmarking Google Maps

Recently I've been building a JavaScript API which wraps the the Google Maps API for both version 2 and 3. Its coming along very well and I've already unified most of the basic functionality into a simple to use API which is kind of a blend between the two versions.

The other day I was building in the marker support when a thought crossed my mind: "Has Maps 3 improved the rendering time for adding Markers to a Map?"

And so I went about setting up a benchmark to test it. It was a very simple test which uses firebug's profiler to monitor the "addMarker()" function call to add 1000 markers to a map. I performed the test identically in both versions of Maps. And the results? Amazing.

Version	Own Time	Total Time	Avg. Time	Min Time	Max Time
2	13.252ms	14684.619ms	14.685ms	11.756ms	238.471ms
3	9.132ms	287.789ms	0.288ms	0.274ms	0.548ms

Well done Google Maps team!

Extending Element Part 2

So as I mentioned at the end of my previous entry regarding extending Element in Internet Explorer; all my "hack" really did was replace one problem with another.

Now, at the moment I'm working on a Google Maps project and as you can probably imagine (or perhaps already know) there are a lot of DOM elements created by maps. For the solution in my previous blog entry, it is absolutely crippling trying to load a map. In fact, it took well over 5 minutes to render a single map. This project is for a client and so that kind of performance simply won't do.

I had to come up with another solution. It didn't take me too long to figure something out. I remembered from my time working with the Prototype JavaScript library that the developers there had figured out a way of extending it while maintaining performance in the browser. I also recalled that it wouldn't work in Internet Explorer unless the element had been extended with their element extension function which was usually done by the dollar function.

So I decided to follow this practice while applying my own sugar to the solution. And so here is the solution:

if (!window.Element)window.enableExtendElement;
$=function(element)
{
 if (window.enableExtendElement && !element.__extended)
 {
     Object.extend(element,Element.prototype);
     element.__extended=true;
 }
 if (Object.isElement(element))return element;
 return document.getElementById(element);
}

As for the Object.extend function. Well I'm sure you can figure that one out on your own ;)

Extending Element

For those of you that work with the web on a regular basis, you'll know that trying to program or design anything in internet explorer is like trying to get blood out of a stone.

The other day I spend a great many hours trying to tame the beast, and tame the best I have!!!

Microsoft, in all their wisdom, decided back in the day that extending any element on the page was totally uncool and blocked it to programmers. Now modern browsers such as Firefox, Chrome, Safari, Opera, Any-other-browser-except-IE6-and-7 actually allow the "Element" to be extended (Yes I didn't mention IE8 because someone at Microsoft got the memo for IE8 and allowed it).

My point is, after hours of hair pulling (yes, my own), I've created a simple HACK which uses another one of Internet Explorer's non-W3C-compliant technologies to bypass this ridiculous restriction. So if there is a way of getting around it, why not simply allow it in the first place... - Well done Microsoft, once again you've managed to leave me baffled, tired and out of patience - a state-of-mind which will take me weeks to get over.

I would really like to thank this website for giving me an idea for the foundation of this hack.

And so here it is. But be warned, it simply makes extending Element "work", the performance however, will make you cry.

var seedElement=false;
if (Object.isUndefined(window.Element))
{
seedElement=true;
window.Element=function(){};
}
//Extend the Element prototype.
Element.prototype.hide=function()
{
    this.style.display='none';
}

//... do more extending ...

if (seedElement)
{
    var    behaviors    =[],
  newCSS        =document.createElement('style');
  newCSS.id        ='IE_ELEMENT_SEEDER';
  newCSS.type        ='text/css';
  document.getElementsByTagName('head')[0].appendChild(newCSS);
    for (var method in Element.prototype)
    {
    behaviors.push('this.'+method+'=function(){return Element.prototype.'+method+'.apply(this,arguments)}');
    }
  document.styleSheets[(document.styleSheets.length-1)].addRule('*','{behavior:expression('+behaviors.join(',')+')}');
  delete newCSS,method;
}
delete seedElement;

Long Time No Bloggin'

Its been awhile since I've blogged, but I plan to change all that. As one of my new years resolutions, I plan to make an effort to blog at least once a fortnight. Weather it be something I'm currently working on or some insight into a particular topic, it'll all be here.