CODEWITHSUNDEEP
javascriptiframedictionarygoogle-mapsgoogle-maps-api-2
Michał Pękała
Michał Pękała

Reputation: 2389

GMap in iframe gets off-center

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

Upvotes: 1

Views: 2508

Answers (1)

Michał Pękała
Michał Pękała

Reputation: 2389

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),
});

Upvotes: 1

Related Questions