Google Maps API v3 Second Map调整大小和中心

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。

希望这可以帮助。