Skip to content

Debugging Google Maps with an Offset Center

September 29, 2009

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.

Advertisements
2 Comments leave one →
  1. October 8, 2009 5:08 pm

    Thanks for posting Douglas, that solved my issue immediately.

  2. May 11, 2010 1:15 pm

    Thanks a lot Douglas, you saved me!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: