Databases
StackOverflow2013
Postsdbo
POGoogle Maps won't work when using classes to select multiple canvases
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps won't work when using classes to select multiple canvases
    text
    copied!<p>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.</p> <p>HTML Example:</p> <pre class="lang-html prettyprint-override"><code>&lt;div class="gMapsCanvas" data-address="Hauptplatz 22, 4002 Linz, Austria"&gt;&lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.gMapsCanvas { width: 100%; height: 100%; } </code></pre> <p>JavaScript</p> <pre><code>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 &lt; this.maps.length; cnt++) { this.maps[cnt].resize(); } }; var maps; $(window).load(function() { maps = new Maps($(".gMapsCanvas")); }); </code></pre> <p>I need the global "maps" variable and the resize methods so that i'm able to globally resize the maps (my layout is dynamic).</p> <p>My Problem is that it won't work: In all Browsers, the canvases stay blank and in Firefox, I get following error code:</p> <pre><code>NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle] </code></pre> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload