Debugging Google Maps with an Offset Center

MyLocalPark.com has an embedded Google Map showing each park’s location. On the park-screen, this embedded map is hidden until the visitor clicks on a tab. To eliminate any momentary display of this map during the drawing of the page, the entire DOM element is created with javascript (jQuery).

A strange thing happened when I first built this functionality. When the map was displayed through the visitor clicking the tab, the map’s center was offset (south and east), and the south-most and east-most map-tiles were blank. After significant debugging, I found this only happened when the map was drawn within a hidden element. To solve the problem, I just adjusted the order of the javascript so that Google’s initialization code occurred immediately before the code that hides the container.

Incidentally, since embedded Google Maps don’t work so well with javascript disabled, the embedded map’s dynamically created container/placeholder, replaces a <noscript>…</noscript> container that holds a link to the full map on maps.google.com. This way, if no script runs, the visitor still has access to the map, and the page continues to be readable. And, if javascript is enabled, the noscript-link does not display momentarily, or flicker, before the javascript completes.