OSMap / GMap switch failing - only on IE

GazK · 12-27-2010, 08:02 PM

I'm not sure whether this is best posted here, or on a google maps api forum, but here goes:

I have a site which uses a google map, and works well, like this:

http://www.railwaysarchive.co.uk/eve...p?eventID=6684

I have built a version of that page which uses an OS map by default, but allows switching to a google map. It is here:

http://www.railwaysarchive.co.uk/osm...p?eventID=6684

The script uses a simple toggle as follows:

Code:

function toggleMap() {
// toggle map div visibility

	var		googlemap = document.getElementById("googlemap");
	var		OSmap = document.getElementById("OSmap");
	
	if (OSmap.style.display!="block") {
	//	currently hidden, show
		OSmap.style.display="block";
		googlemap.style.display="none";
		document.getElementById("maplink").innerHTML= "Switch to Google Map";
	} else {
		OSmap.style.display="none";
		googlemap.style.display="block";
		document.getElementById("maplink").innerHTML= "Switch to OS Map";
	}
	
}

I was having trouble getting both maps to load their respective data when one was hidden, so both maps start out with display:block and then the gmap is hidden during the <body onload>. This system works great with Firefox and with Chrome, but in IE if you switch to the google map the tiles don't load. Can anyone help?

Relevant code snippets are as follows:

Code:

<body onload="createOSAccidentSummaryMap(52.6566359591919, -3.14070984721184, 7); createAccidentSummaryMap(52.6566359591919, -3.14070984721184, 'accident', 13); toggleMap();">

function createAccidentSummaryMap(dblLatitude, dblLongitude, enumType, lngZoom) {
// creates a map with a single event marker, map type controls and full zoom controls
// and centers it on the event coordinates
	if (GBrowserIsCompatible()) {
	// checks for compatible browser
		map = new GMap2(document.getElementById("googlemap"));
		map.addControl(new GSmallZoomControl());
        map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());
		map.setCenter(new GLatLng(dblLatitude, dblLongitude), lngZoom);
		map.enableDoubleClickZoom();
		map.setMapType(G_HYBRID_MAP);
		var icon = createEventIcon(enumType);
		var point = new GLatLng(dblLatitude, dblLongitude);
        var marker = new GMarker(point, icon);
		map.addOverlay(marker);
	}
}