I'm seeing a weird issue with Google Maps and OpenLayers. When loading a page as shown below, only the two top-left tiles render, leaving the rest of the map blank.

I looked in the Network tab in Chrome Dev. Tools, and indeed, those are the only two tiles that came down the pipe.

However, once I interact with the map using the mouse in any way, the tiles all come down properly. Rendering the map using Bing or any other provider works fine.

One likely possibility: the map is rendered on a tab widget. If I explicitly load that tab in the URL (e.g. specifying #tab-4), the map renders fine.

Also, I've seen people having this problem when they don't explicitly specify the dimensions of the map div in pixels, but mine is explicitly set.

The behavior is identical in Firefox, IE 9, and Chrome.

Anyone seen this behavior?

enter image description here

  • 2
    Post your code. Try to strip out as much of the unrelated stuff (e.g. pop-ups or things around your map)
    – Vadim
    Aug 27, 2012 at 21:32
  • Here's the code with the extra stuff stripped out: gist.github.com/3499702.
    – yalestar
    Aug 28, 2012 at 16:16

2 Answers 2


This error occurs always when you initialize the map in invisible part of the website (ie: ). I had the same when working with jQuery accordion. No matter if it is OpenLayers or Google Maps API v3.

I think it is a bug from google.

As far as I remember I solve it by initialization of map during tab opening

  • Odoakr, can you explain how to do this, i have no tabs or I don't know for them.
    – user15862
    Mar 6, 2013 at 18:56

This solution seems to work:


var idleListener = this.addListenerOnce(this.map, 'idle', function() {
  google.maps.event.trigger(this.rootScope.map, 'resize');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.