how to deal with google map inside of a hidden div (Updated picture)

jquery google-maps google-maps-api-3
leora picture leora · Oct 31, 2010 · Viewed 116.5k times · Source

i have a page and a google map is inside a hidden div at first. I then show the div after i click a link but only the top left of the map shows up.

i tried having this code run after the click:

    map0.onResize();

or:

  google.maps.event.trigger(map0, 'resize')

any ideas. here is an image of what i see after showing the div with the hidden map in it.alt text

Answer

Eric picture Eric · Jul 30, 2011

I was having the same problem and discovered that when show the div, call google.maps.event.trigger(map, 'resize'); and it appears to resolve the issue for me.

Related questions

How to disable mouse scroll wheel scaling with Google Maps API

I am using Google Maps API (v3) to draw a few maps on a page. One thing I'd like to do is disable zooming when you scroll the mouse wheel over the map, but I'm unsure how. I have disabled …

Read More
Problems with Google Maps API v3 + jQuery UI Tabs

There are a number of problems, which seem to be fairly well-known, when using the Google Maps API to render a map within a jQuery UI tab. I've seen SO questions posted about similar issues (here and here, for example) …

Read More
Google Maps API v3 infowindow close event/callback?

I like to keep track of any and all infowindows that are open on my Google Maps interface (I store their names in an array), but I can't figure out how to remove them from my array when they are …

Read More