谷歌地图API v3秒地图调整大小和居中

Question

我忘记了WordPress上的嵌入地图，并转移到了Google Maps API v3。所以，我正在使用这个：

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>

和这个函数：

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(30.654372, -6.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 contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE</h2>'+
    '<div id="bodyContent">'+
    '<p style="font-size:1em">ADD DESCRIPTION HERE</p>'+
    '</div>'+
    '</div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});      
  // To add the marker to the map, call setMap();
  marker.setMap(map);  
  }
  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;

如您所见，声明了两张地图。我是我的网站，我正在使用水平选项卡在显示地图之间交替。

问题是我在这里的其他主题中发现的，但那里给出的解决方案似乎不起作用。 正如您在我评论的行中看到的那样：

//google.maps.event.trigger(map1, 'resize');

/

/map1.setCenter（myLatlng1）;

此代码无法使第二个地图居中。地图不能正确适应div，中心图标在左角，这是常见的问题。

我想你已经知道问题是什么，但是如果你需要图片，我会毫无问题地提供它们。

标签代码在WordPress上的外观：

    [wptabs type="accordion" mode="horizontal"]
[wptabtitle] Portugal[/wptabtitle] [wptabcontent]
<div id="map_canvas" style="width: 100%; height: 300px; border: 1px solid;"></div>
[/wptabcontent]
[wptabtitle] Brasil[/wptabtitle] [wptabcontent]
<div id="map_canvas1" style="width: 100%; height: 300px; border: 1px solid;"></div>
[/wptabcontent]
[/wptabs]

Answer 1

好吧，似乎这个插件使用 jQuery UI，那么你可以做这样的事情：

$('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "tab-map-2") {
        google.maps.event.trigger(map1, 'resize');
        map1.setCenter(myLatlng1);
    }
});

其中 #tabs 在div ID 之外，tab-map-2 是第二个地图的选项卡面板 ID。

希望这有帮助。