Google Maps Rendering markers and map center differently in Internet Explorer

Question

Hiya All,

I have a strange problem with Google Maps showing differently in IE and the rest of the browser world. I'm testing in IE8 and in IE8 Compatibility view, both show the same, but Safari, FF, Chrome all act fine and as expected.

The page i'm working on is this: http://afid.staging.dante-studios.com/ at the front are two place holders one for Asia and one for Africa. Both seem to centre incorrectly in IE.

Also the markers and info boxes are loaded up from an XML file, it seems that IE isn't loading all of them up either....

I would appreciate if anyone can shed any light on this as i've spent quite a while so far attempting to debug it but i can't actually find anything wrong...

Thanks in advance

UPDATE The map center issue has been kindly resolved, but now the issue with not all the markers showing still remains, if one is to look at the asia section (india) and compare between IE and any other browser, not all the markers are showing, any clues will be appreciated.

Answer 1

The blame for the map.setCenter() problem that you are getting in IE8 is on the $("#map-holder").fadeOut() method.

Try it without the fadeOut() like this, and the centering will work fine:

$(".map-overlay-right").click(function () {
 var map = new GMap2(document.getElementById('map-holder'));
// $("#map-holder").fadeOut('slow', function(){         
  var gmarkers = []; 
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  var Asia = new GLatLng(23.684774, 90.087891);
  map.setCenter(Asia, 4); 

  $.get("http://afid.staging.dante-studios.com/xml-feed-google-maps",{},function(xml) {
   $('marker',xml).each(function(i) {
    html = $(this).text();
    lat = $(this).attr("lat");
    lng = $(this).attr("lng");
    label = $(this).attr("label");
    var point = new GLatLng(lat,lng);
    var marker = createMarker(point,label,html);
    map.addOverlay(marker);
   });
  });

// });
 $("#map-holder").fadeIn('slow'); 
});

Moving the map.setCenter() outside the fadeOut() method also solves the IE8 centering problem:

$(".map-overlay-right").click(function () {
 var map = new GMap2(document.getElementById('map-holder'));
 $("#map-holder").fadeOut('slow', function(){         
  var gmarkers = []; 
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());

  $.get("http://afid.staging.dante-studios.com/xml-feed-google-maps",{},function(xml) {
   $('marker',xml).each(function(i) {
    html = $(this).text();
    lat = $(this).attr("lat");
    lng = $(this).attr("lng");
    label = $(this).attr("label");
    var point = new GLatLng(lat,lng);
    var marker = createMarker(point,label,html);
    map.addOverlay(marker);
   });
  });

 });
 $("#map-holder").fadeIn('slow'); 

 var Asia = new GLatLng(23.684774, 90.087891);
 map.setCenter(Asia, 4); 
});