Can I put google map functions into a closure?

Question

I am trying to write some google map functionlity and playing around with javascript closures with an aim to try organise and structure my code better.

I have the following code:

var gmapFn ={
    init : function(){
        if (GBrowserIsCompatible()) {
            this.mapObj = new GMap2($("#map_canvas"));
            this.mapObj.setCenter(new google.maps.LatLng(51.512880,-0.134334),16);
        }
    }
}

Then I call it later in a jquery doc ready:

$(document).ready(function() {
    gmapFn.init();
})

I have set up the google map keys and but I get an error on the main.js :

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://maps.gstatic.com/intl/en_ALL/mapfiles/193c/maps2.api/main.js :: ig :: line 170" data: no] QO()

THe error seems to be thrown at the GBrowserIsCompatible() test which I beieve is down to me using this closure, is there a way to keep it in an closure and get init() working?

Answer 1

There's nothing wrong with your code or implementation, save the fact that GMap2 cannot use a jQuery object as a reference. Use plain old document.getElementById("map_canvas").

Alternatively, you can use $("#map_canvas")[0] or $("#map_canvas").get(0) to reference the actual DOM element and pass that to the GMap2 constructor if you want to be consistent with your use of jQuery.

Incidentally, you seem to be mixing v2 with v3, e.g. new google.maps.LatLng() vs new GLatLng().