Google Map Positioning in IE and FF

Question

On this page I have a link to a google map which opens in a lightbox:

http://www.thereappliancestore.com/

When I open the map in Safari the marker displays correctly in the center of the map. However in FF and IE8 the marker is over to the left and up a but. It's initially out of view so you have to manually navigate across the map to find it.

This is the config for the map:

/////////////////////Configuration for the Google Map////////////////////////////

     function initialize() {
       if (GBrowserIsCompatible()) {
         var map = new GMap2(document.getElementById("map_canvas"));

/////////////Add longitude and lattitude/////////////////////
         var center = new GLatLng(43.69085455345101, -79.58727836608887);

///////////////////////Zoom level///////////////////////////////////
         map.setCenter(center, 13);

/////////////////////Marker position//////////////////////////////////
         var marker = new GMarker(center);

///////////Action when marker clicked///////////////////////////////
         GEvent.addListener(marker, "click", function() {
           marker.openInfoWindowHtml("Re-Appliance Store<br />191 Attwell Drive, Unit 1<br />Etobicoke, Ontario");
         });
///////////Add marker///////////////////////////////
         map.addOverlay(marker);
       }
     }

Does anyone know what's going wrong?

Answer 1

The problem is not in your javascript code.. but to the fact that you open the map in a fancy box.. (in iframe with ajax)

This means that at the time the map page is loaded the fancybox is still hidden. So it has width/height 0 and so the center is at the top left (the 0,0 point)..

It is a documented issue with fancybox . read the following for a more detailed explanation and a couple of workarounds

The google maps in a fancybox iframe is not centered according to my script

Answer 2

Replacing this:

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

With this:

var map = new GMap2(document.getElementById("map_canvas"),{size: 
new GSize(675,430)});

did the trick!

Answer 3

Daniel, thank you so much! I had the same problem and now it is solved;) Many thanks!!!