Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The "single-tile" condition is generally caused by initializing a Google map on a hidden canvas, which appears to be the case here.</p> <p>If the map is to be initially hidden and you don't want to resize, then your two main options are :</p> <ul> <li><p>initialise on a visible canvas then immediately hide it - and hope that the map doesn't flash-display.</p></li> <li><p>initialize the map on first display. I do this in one of my applications and find the delay not at all unacceptable, despite some heavyweight layering.</p></li> </ul> <p>I suppose you might also consider the following possibility, though I've never tried it :</p> <ul> <li>initialize the map on a "visible" off-screen canvas, then reposition it on-screen at first view. Thereafter the canvas may be conventionally hidden/shown.</li> </ul> <h2>Edit</h2> <p>Yes, a map can be initialized off-screen then moved on-screen. </p> <p>HTML:</p> <pre><code>&lt;div id="off_screen"&gt; &lt;div class="googleMapContainer" id="map-canvas"&gt;&lt;/div&gt; &lt;/div&gt; ... &lt;div class="tab"&gt; &lt;h3&gt;Headline 3&lt;/h3&gt; &lt;div id="map-placeholder"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#off_screen { position: absolute; left: -1000px; top: -1000px; } </code></pre> <p>Javascript:</p> <pre><code>var $mapCanvas = $("#map-canvas"); map = new google.maps.Map($mapCanvas.get(0), myOptions); var listenerHandle = google.maps.event.addListener(map, 'idle', function() { $mapCanvas.appendTo($("#map-placeholder")); google.maps.event.removeListener(listenerHandle); }); </code></pre> <p>See <a href="http://jsfiddle.net/KhwZS/1304/" rel="nofollow">updated fiddle</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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