Ui-Tabs中的Google Maps Api v3地图已被删除

我知道这是一个常见的问题，我已经在这里查看了解决方案的所有主题，但是，当我更改标签时，我继续这个问题：

请看看我的js代码：

function initialize() { //replace 0's on next line with latitude and longitude numbers from earlier on in tutorial. var myLatlng = new google.maps.LatLng(40.654372, -7.914174); var myLatlng1 = new google.maps.LatLng(43.654372, -7.914174); var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var myOptions1 = { zoom: 16, center: myLatlng1, mapTypeId: google.maps.MapTypeId.ROADMAP } //here's where we call the marker. //getElementById must be the same as the id you gave for the container of the map var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions1); //google.maps.event.trigger(map1, 'resize'); //map1.setCenter(myLatlng1); var marker = new google.maps.Marker({ position: myLatlng, title:"ADD TITLE OF YOUR MARKER HERE" }); var marker1 = new google.maps.Marker({ position: myLatlng1, title:"ADD TITLE OF YOUR MARKER HERE" }); var contentString = '
'+ '
'+ ''+ '
ADD TITLE HERE'+ '
'+ '
ADD DESCRIPTION HERE'+ ''+ ''; var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); google.maps.event.addListener(marker1, 'click', function() { infowindow.open(map1,marker1); }); google.maps.event.addListener(map, "idle", function(){ marker.setMap(map); }); google.maps.event.addListener(map, "idle", function(){ marker1.setMap(map1); }); // To add the marker to the map, call setMap(); google.maps.event.addListenerOnce(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); map.setCenter(myLatlng); // be sure to reset the map center as well }); google.maps.event.addListenerOnce(map1, 'idle', function() { google.maps.event.trigger(map1, 'resize'); map1.setCenter(myLatlng1); // be sure to reset the map center as well }); } function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript; 

我有两张地图，每张标签一张。 我可以通过其他post解决中心点隐藏在左角的问题：

  .ui-tabs .ui-tabs-hide { /* my_tabs-1 contains google map */ display: block !important; position: absolute !important; left: -10000px !important; top: -10000px !important; } 

但是这里说的问题我没有运气，甚至在这里看其他主题。

Answer 1

我找到了干净的解决方案：

Answer 2

您需要设置中心并触发重新resize的事件。

 MyMap.setCenter(MyCenterCoords); google.maps.event.trigger(MyMap, 'resize'); 

Answer 3

此代码google.maps.event.trigger（map，’resize’）应该在页面显示中，如下所示。

 $('#map_result').live('pageshow',function(event){ google.maps.event.trigger(map, 'resize'); }); 

顺便问一下，你找到了解决方案吗？ 我实际上使用CSS工作。

Answer 4

我知道它不是一个优雅的解决方案，但您可以在每个选项卡中添加一个Iframe。 当您单击选项卡时，地图加载的大小正确。