Montag, 28. März 2011

Why is my Google Maps maker not centered after "setCenter" in IE ?

Ever build a google Maps API snippet in your website ?
Great ! easy !

Ever made a maker there that should be centered ?
Great ! easy ? no !

Looked great in FF and every other Browser , but IE set the center of the map, and so the marker, in the top left corner, (For Google in the north west corner).

Whats up here ?

The answer:
There are two cases that can happend here:

1) IE doesnot know how big your div is and so it goes the lazy way and centers it just NW.
For this you will not be allowed to set your code up like this:

<div id="mapSmall" style="width: 300px; height: 110px;"></div>

function myMap(...){
......
mymap = new GMap2(document.getElementById("mapSmall"));
mypoint = new GLatLng(39.915538, -75.267069);
mymap.setCenter(mypoint, 13); .....
}

myMap();


This will confuse IE, as the div is not "ready" when you trigger your function. You have to put the function call in the body onload event:

<body onLoad="myMap();">

The second thing, is that a style sheet can easy corrupt your map div, so if you have some "display block none" things in your stylesheet - you will also stop here. If this is the case you can fix your div with this snipped:

mydiv.style.display = 'block';
mymap = new GMap2(document.getElementById("mydiv"));
mypoint = new GLatLng(39.915538, -75.267069);
mymap.setCenter(mypoint, 13);
mydiv.style.display = 'none';

Easy if yaa know, hum ?

Keine Kommentare:

Kommentar veröffentlichen