The Google Maps window displays only part of the map

Question

I have used Google Maps on many sites in the past, but I ran into a problem that I had not encountered before. The map window is displayed, but it only displays map segments at the top left and something after that (even when I move) nothing loads right. It is as if the window that is moving around has an internal offset that pushes it away from the viewport. Does anyone know what might cause this?

EDIT

I just found that when the window is resized, the map is updated and the layout is fixed.

The map is contained in a tab that displays through javascript (and hides through display:none ). The tab container is loaded via ajax, and when it is loaded, the loadMap function is called. I tried to defer the loadMap function by including it in the setTimeout function, which delays the creation of the map by 1 second, but it still does the same thing (requiring a resize window to fix it).

Answer 1

Right, I'm not sure why it doesn’t work, but I changed my code to only perform the map creation function when the tab first opens. It makes it work right.

Answer 2

This is a typical problem that you will encounter when the map container is hidden or has zero dimensions during map creation.

A common solution is to do one of the following:

• Postpone the creation of the map until the container element is visible and correctly installed, or

• Call google.maps.event.trigger( map, 'resize' ) after the map is visible or resized. This event tells the Maps API to reconfigure its calculations of what is visible on the map.

It looks like you already solved it using the first option, which is by far the best choice of the two. Your page will load faster because you do not waste time creating an invisible map. If you have a situation where the size of the map may change (for example, a resizable window), then you can trigger a resize event when this happens.