javascript - Google Maps won't work when using classes to select multiple canvases

Question

I'm currently building a cms which should be able to dynamically render several Google Maps instances. My current approach is to find all divs with the class "gMapsCanvas" and initialize Gmaps for each of them. The address of Google Maps is taken out of the div's "data-address" Attribute.

HTML Example:

<div class="gMapsCanvas" data-address="Hauptplatz 22, 4002 Linz, Austria"></div>

CSS:

.gMapsCanvas
{
    width: 100%;
    height: 100%;
}

JavaScript

var GoogleMap = function(canvas, address)
{
    var _parent = this;

    this.location = new google.maps.LatLng(-34.397, 150.644);

    var options = 
    {
        center: this.location,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: 
        {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_CENTER    
        },
        streetViewControl: false
    };

    this.map = new google.maps.Map(canvas, options);

    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': address}, function(results, status) 
    {
        if (status != google.maps.GeocoderStatus.OK)
            return;

        _parent.location = results[0].geometry.location;

        var marker = new google.maps.Marker(
        {
            map: _parent.map,
            position: _parent.location
        }); 

        _parent.resize();
    });
};

GoogleMap.prototype.resize = function() 
{
    google.maps.event.trigger(this.map, "resize");

    this.map.setCenter(this.location);
}

var Maps = function(classes)
{
    var _parent = this;

    this.maps = new Array();

    classes.each(function()
    {
        _parent.maps.push(new GoogleMap($(this).get(), $(this).attr("data-address")));  
    });
};

Maps.prototype.resize = function() 
{
    for (var cnt = 0; cnt < this.maps.length; cnt++) 
    {
        this.maps[cnt].resize();
    }
};

var maps;

$(window).load(function()
{
     maps = new Maps($(".gMapsCanvas"));
});

I need the global "maps" variable and the resize methods so that i'm able to globally resize the maps (my layout is dynamic).

My Problem is that it won't work: In all Browsers, the canvases stay blank and in Firefox, I get following error code:

NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]

All the code works fine when using the standard "getElementById"-Method, so it seems that the Problem is the way i'm using JQuery to select the divs.

Answer 1

.get() returns an array.

Change:

_parent.maps.push(new GoogleMap($(this).get(), $(this).attr("data-address")));  

To:

_parent.maps.push(new GoogleMap($(this).get(0), $(this).attr("data-address")));  

working example