Google Maps 3.x with jQuery UI 1.10.x issue - asp.net

Question

I have created a test ASP.Net 4.0 application with Master \ Child page configuration to test some needed enhancements for our main application. I need to be able to put a google map inside a jQuery UI tab control. It will not be the first tab in the production version so I create a tab control with two tabs in the test app and put the map in the second tab. No matter what I did I could not get the map to display correctly in the second tab. As a test I move the map (just a div id="map-canvas" that jQuery attacks) into the first tab and walla - everything works fine - even after changing tabs and returning. Googled around a ton but cannot find a resolution for this one. Here is the map working in the first tab:
And here is the same map not working when placed in the second tab:
Here is the code:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MyAPIKey&sensor=false">
</script>
<link href="App_Themes/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>Map in Tab Control</h2>
<div id="mapTabs">
<ul>
<li>Tab-1</li>
<li>Tab-2</li>
</ul>
<div id="a"><h2>This is the first tab</h2>
</div>
<div id="b"><h2>This is the second tab</h2>
<div id="map-canvas" style="min-width:300px; min-height:300px;"></div>
</div>
</div>
<script src="Scripts/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize(lt, ln) {
var latlng = new google.maps.LatLng(lt, ln);
var map = new google.maps.Map(
document.getElementById('map-canvas'), {
center: new google.maps.LatLng(lt, ln),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latlng,
title: "Test Pin"
});
marker.setMap(map);
}
$(document).ready(function () {
$("#mapTabs").tabs();
var addr = '2626 East Oakland Park Blvd Oakland Park, FL 33306';
var gc = new google.maps.Geocoder();
var lat;
var lon;
gc.geocode({ 'address': addr }, function (results, status) {
lat = results[0].geometry.location.lat();
lon = results[0].geometry.location.lng();
initialize(lat, lon);
});
});
</script>
</asp:Content>

Answer 1

I know this is an old post, but here's for anybody else with similar issues:
You'll need to call your map's initialize function.
Since you're using jquery, this should work:
$("#b").click(function() {
initialize();
});