The DevFest 2010 Lagos event has come and gone, but we are still brainstorming on some of the ideas still brewing in our minds. With just a fews days (hours actually) before the deadline for the submission of our fully formed "prototypes", I can't help but remember the bug I had during the conference while building my map app.

I love the Ajax and Web 2.x paradigm, as a result I've invested years of time and resources in JQuery and ExtJS for building cool UI's. I however could not proceed in my prototype attempt while using JQuery 1.4 with the Maps v3 API. Consider the following :

 var latlng = new google.maps.LatLng(10.5, 8.9);
 var myOptions = {
   zoom: 6,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 }; 
 var myMap = new google.maps.Map($("#mapane"), myOptions);

The last line $("#mapane") is JQuery's version of document.getElementById("mappane"), I'm using this because the JQuery's approach (just as other Ajax UI libraries) is guaranteed to be work across all modern browsers however the code fails to perform and the cost was terrible - I had nothing to show to the DevFest judges hence my prototype was not eligible for voting.

The issue is that in JQuery parlance $("#mapane") actually returns null (if it finds no match for the selector within the DOM) or an Array literal containing matched nodes, so instead of giving the google.maps.Map constructor a node object to work with, my call to $("#mapane") returns an array literal which breaks the code.

The solution is to retrieve the node from the array thus :

var myMap = new google.maps