¿Por qué mi map no se representa en una pestaña de jQuery?

Si renderizo un map en una pestaña que está oculta de manera pnetworkingeterminada, navego a esa pestaña (la hago visible), el map no se procesa correctamente. Pero cuando actualizo la página, el map se representa correctamente.

Problema Imagen del mapa que no se procesa correctamente.

Javascript de Google Maps

var map; function initialize() { var latlng = new google.maps.LatLng(serLat, serLang); // - 34.397, 150.644); var myOptions = { zoom: 10, width: 1270, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), myOptions); var marker = new google.maps.Marker ( { position: new google.maps.LatLng(serLat, serLang), map: map, width: 1270, title: 'Click' } ); // var infowindow = new google.maps.InfoWindow({ // content: cntnt // }); // google.maps.event.addListener(marker, 'click', function() { // // Calling the open method of the infoWindow // infowindow.open(map, marker); // }); } window.onload = initialize; 

URL de Jquery Tabs http://quickerbook.imobisoft.eu/App_Themes/js/jquery.tabify.js

HTML de tabs

 <ul id="tabs-hd"> <li class="active"><a href="#tab1">Tab One</a></li> <li><a href="#tab2">Tab Two</a></li> <li><a href="#tab3">Tab for Google Map</a></li> </ul> <div id="tab1">Content for tab one...</div> <div id="tab2">Content for tab two...</div> <div id="tab3"><div id="map"></div></div> 

Hay dos cosas que debes hacer:

  1. Cuando revelas la pestaña oculta, asegúrate de dimensionar correctamente el contenedor DIV en el que se encuentra el map.

  2. O espere hasta que ese DIV sea visible y esté dimensionado antes de crear el map en él, o bien, después de que el DIV sea visible y esté dimensionado, envíe un post de cambio de tamaño al map:

google.maps.event.trigger( map, 'resize' );

Todo lo que hice fue agregado una altura en el estilo del elemento div y el map comenzó a aparecer.

 <div class="event-details" style="height:500px;" id="map_canvas"> </div> 

hola, tengo el mismo problema que hacer clic en el button Tabulador y luego debe llamar a initialize() ; ver lo que estoy haciendo configuro esta function en cada atributo de clic de tabs

 function ChangeTabs(e){ $('#tabs-1').hide(); $('#tabs-2').hide(); $('#tabs-3').hide(); $('#tabs-4').hide(); var a = $.browser; if (a.msie) { $(e.srcElement.hash).show(); if(e.srcElement.hash=='#tabs-3') initialize(); } else { $(e.currentTarget.hash).show(); if(e.currentTarget.hash=="#tabs-3") initialize(); }