Google Maps not rendering completely on page?

Question

Hi guys, I have a google maps on my page with a search pane I built myself which can be displayed and hidden at will. It covers like lets say 200 pixels of the map on a side. The thing is that when I resize my map or so the area where the pane overlaps is unrendered i.e the map doesn't render there for some reason.

Check out this link

In the Box type in lets say OMDB which is an icao code for an airport and press enter.

The results are shown and you see the pane. Now click on the full screen link and then click on the airports tab to make the panel go away - you see now that part of the map hasn't rendered at all...I have to drag the map around and that only partially renders that area..how can I fix it its getting on my nerves now :(

=======================

FYI - I've run it on Google Chrome, FIrefox and IE8 on windows XP...is there a way to like force complete rendering of a map or so? This is quite an erratic problem and could it be concerne with my code or is it a host issue? Or does google just don't like me :(

===========================

EDIT

See the big ugly patch on the side. Its unrendered area where the map should have been rendered as well.No amount of zooming in and panning is helping clear this :( Help please!!!!!!

=================================

PLEASE SOMEBODY HELP ME HERE!!!!!

Answer 1

As far as I can see it works fine on OS X 10.6.2 in Google Chrome.

http://i33.tinypic.com/sfe3ah.png

Only problem is that Copenhagen Airport is nowhere near the location your application implies. And LAX is in the middle of the ocean ;-)

Edit:
I see your screenshot, and it would appear to me that somehow Google Maps does not render the part of the map that was covered by the search and search results pane, and afterwards the rendering is not triggered correctly upon hiding the search pane.

I haven't been able to find a decent render triggerer in the Google Maps API, but I think you should try something like programatically zooming in and out or moving the center of the map somewhere else and back, in order to maybe force the re-rendering of the map.

Alternatively you could try manually triggering some of the events that you think might set off a rerendering of the map, for example google.maps.event.trigger(map, 'resize').

I know these suggestions feel like a terrible hacking way of making it work, and I am highly unsure whether it would work, but it is my best shot ;-)

Answer 2

I'm not able to reproduce the issue you are having, but it looks similar to another issue I've seen with google maps.

It looks like you might be running afoul of the way google maps determines which tiles are in view. It calculates this only once, when the map is loaded into the div the first time, and if the div grows, then not enough map will be drawn. Fortunately, this is easy to deal with. any time the container may have resized, use the checkResize() method on the map instance, and the clipping area will be recomputed from the container's current size.