I’m currently working on an existing website for a client and one of the requirements I’ve been given is to place an instance of a Google Map within a Microsoft AJAX Toolkit tab container.

This was easy enough but during testing I noticed that in some cases when I moved away from the page and then returned to it, the map was only displaying in the top left of it’s container div.  Upon  closer examination I found out that the only time this was happening was when the active tab index of the AJAX tab container was being set in code behind e.g.

[code language=”csharp”]
// Set active tab index of AJAX Toolkit Tab Container to zero
MyAjaxTabContainer.ActiveTabIndex = 0;
[/code]

To get around this there’re a couple of things that need to be done. First off you need to add a client side tab changed event to your tab container:

[code language=”html”]



[/code]

Then put the client side method together:

[code language=”javascript”]
function resizeMap() {
// Definition of map, mapOptions and centreLatLng should be handled
// elsewhere within your JS file.
// Just included here for completeness…

var mapOptions = { zoom: 12 };
var map = new google.maps.Map(document.getElementById(“MapCanvas”),
mapOptions);
var centreLatLng = new google.maps.LatLng(56.474035,-2.968501);

google.maps.event.trigger(map, ‘resize’);
map.setCenter(centreLatLng);
}
[/code]