Google Maps API v3 Second Map Resize and Center

Question

我忘记了 wordpress 上的嵌入地图，并移至谷歌地图 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。

希望这会有所帮助。