Question

I have a Google Map (API 2) that used to work fine as a standalone page.

However, when I load the map page within an iframe (with Thickbox), the map gets off-center:
normally it’s centered over Germany and in the iframe it centers on Iran, instead.

How to make the map center correctly?

---

My guesses:

The problem can result from the iframe loading time. I guess, that the script calculates window size basing on the iframe size when it’s still loading. It’s strange since I load the map when the document is ready.

$(document).ready(function() {
  setupSearchForm();
  setupMap();
  setupResults();
});

For instance, when I refresh the already loaded iframe the center comes back to Germany.
A sample of code loading the map

Answer 1

My guess turned out to be good. The reason was iframe size calculated during its load.

The fix is easy: just to specify the size in GMapOptions – then the map will always know how big is its container.

In my case it meant changing

map = new GMap2(document.getElementById("map_canvas"));

to

map = new GMap2(document.getElementById("map_canvas"), { 
  size:new GSize(970,500),
});