Google Maps Window only showing part of the map

Question

I have used Google Maps on many websites in the past, but I have been posed with an issue I haven't experienced before. The maps window is showing, but it's only showing maps segments from the top left, and anything after that (even when i'm navigating around), nothing loads to the right. Its as if the window that is navigated around has an internal offset that is pushing it off the side of the viewport. Does anyone know what could be causing it?

EDIT

I have just discovered that when the window is resized, the map refreshes, and the layout is fixed.

The map is contained within a tab that is shown via javascript (and hidden via display:none). The tab container is loaded via ajax, and when it loads, the loadMap function is called. I tried postponing the loadMap function by enclosing it within a setTimeout function that delays the creation of the map by 1 second, but it still does the same (requiring the window to be resized to fix it)

Answer 1

This is a typical problem you'll run into when the map container is hidden or has zero dimensions at the time you create the map.

The usual solution is to do one of these:

• Defer creating the map until the container element is visible and sized properly, or

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

It sounds like you've already solved it by using the first option, which is definitely the better choice of the two. Your page will load faster because you aren't spending the time to create an invisible map. If you do have a situation where the map size may change (e.g. a resizable window) then you can trigger the resize event when that happens.