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.

// Set active tab index of AJAX Toolkit Tab Container to zero
MyAjaxTabContainer.ActiveTabIndex = 0;

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:

<ajax:TabContainer ID="MyAjaxTabContainer" runat="server"
   OnClientActiveTabChanged="resizeMap">
   <!-- tabs go here! -->
</ajax:TabContainer>

Then put the client side method together:

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);
}