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 m

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.

Answer 2

Righto, I am not sure why it's not working, but I have changed my code to only execute the map creation function when the tab is first opened. That makes it work correctly