Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
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 '12 at 21:32
    
Here's the code with the extra stuff stripped out: gist.github.com/3499702. –  yalestar Aug 28 '12 at 16:16

2 Answers 2

up vote 3 down vote accepted

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

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

This solution seems to work:

http://stackoverflow.com/a/17933005/913295

var idleListener = this.addListenerOnce(this.map, 'idle', function() {
  google.maps.event.trigger(this.rootScope.map, 'resize');
  google.maps.event.removeListener(idleListener);
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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