Part loaded, part grey

[Jules]

Greetings!

I'm just a begginer at Google Maps API and I need a help with the very
basic, been trying the Google maps "Hello World" script and run into
trouble :D I'm running the maps canvas hidden (display:none) on the
page load. Once I show the canvas (display:visible), only one part of
the map is visible and the rest of the map is greyed out:
http://i.imgur.com/cLb57.png . The display show/hide toggle is handled
by jQuery.

Seems like it's a known issue (been googling for it couple hours now,
trying the suggested solutions but without any luck). Some solutions
say it is an issue of CSS - I ran my page through the validator and it
was without any errors, only warnings.

The webpage is located here: http://goo.gl/NcCRL and the map itself is
hiding under "sidlo" button in the navigation menu. Here is another
version this time triggered directly from jQuery (through gmap2
plugin): http://goo.gl/KkwSq Please don't mind the design or the messy
code, it's just a work in progress. I'm using Google Chrome 12, tried
this in IE 9 and the issue was there as well. IE 6 on other computer
was just fine.
The map works perfectly after it's refreshed (so it is displayed from
the very first moment).

I'm getting kinda desperate :/

Thank you for any help, ideas...

Jules

[William]

Yes it's a known issue that when the map_canvas is hidden using CSS
style display:none it has zero width and height, so when the map is
initialized it doesn't have the correct size, and also the center is
in the wrong position.

You will need to initialize() the map once it is visible.

One way is to declare the map variable as a global and call the
initialize() after the sidlo tab is made visible (and removing the
onload="initialize()" from the body tag)

t(tab);
if (tab == "sidlo" && map == null) {
initialize();
}

[Jules]

Thank you!

It worked in both versions - jQuery and direct API usage as well!

[Luke Mahé]

The other option is to trigger the resize event on the map when you show it.

google.maps.event.trigger(map, 'resize');

-- Luke

On Tue, Jul 26, 2011 at 6:53 PM, Jules <j.s...@gmail.com> wrote:

Thank you!

It worked in both versions - jQuery and direct API usage as well!

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/lS9nQjeBJ_wJ.

To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Rob]

Fantastic! - this has helped me too. So simple, but not so easy to debug. Thanks!!

[Eric L.]

I just wanted to thank you for your answer. You've helped another person!