Question

(i changed question because i discovered this conflict)

http://pedroversolato.com/EASB (the page im working on)

i have a fullscreened map used as background toggled by a binded click on a link. and when the dom is ready i call a .fadeOut function on the div of the map (#map_canvas), and when you click on the link, i call a fadeIn. it works, but when i open the map it only show a little piece of the map, on the top-left corner, but i discovered a conflict between display:none (which is used by fadeOut()) with the google map

note1: to open the map on the link you go to the “contato” link and then click on the map to open the fullscreen map

is there any way to dribble that?

Answer 1

As I said in the other post, you need to trigger resize on the map.

First, in your script.js file, move all of the code that initializes the map from the initialize function to the last document.ready, the same one where you set up the click event on #google_mapa. Then add a callback to the $(“#map_canvas”).fadeIn and in that callback just call google.maps.event.trigger(map, ‘resize’)

The reason you need to do this is fadeIn/fadeOut changes the display value of the map container, which effectively takes it in and out of the DOM.