Javascript 如何将三个不同的地图同时加载到不同的视图？_Javascript_Jquery_Google Maps

Javascript 如何将三个不同的地图同时加载到不同的视图？

javascript jquery google-maps

Javascript 如何将三个不同的地图同时加载到不同的视图？,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,这里我有3个不同的div，我需要的是加载三个映射到它们。我的javascript看起来像 function initialize() { var map_canvas1 = document.getElementById('map_canvas1'); var map_canvas2 = document.getElementById('map_canvas2'); var map_canvas3 = document.getElementById('map_canvas3'); var ma

这里我有3个不同的div，我需要的是加载三个映射到它们。我的javascript看起来像

function initialize() {
var map_canvas1 = document.getElementById('map_canvas1');
var map_canvas2 = document.getElementById('map_canvas2');
var map_canvas3 = document.getElementById('map_canvas3');

var map_options1 = {
  center: new google.maps.LatLng(44.5403, -78.5463),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map_options2 = {
  center: new google.maps.LatLng(44.5403, -78.5463),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};

var map_options3 = {
  center: new google.maps.LatLng(44.5403, -78.5463),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.TERRAIN 
};
var map1 = new google.maps.Map(map_canvas1, map_options1);
var map2 = new google.maps.Map(map_canvas2, map_options2);
var map3 = new google.maps.Map(map_canvas3, map_options3);

      <body>
        <div id="tabs">
            <ul>
                <li><a href="#map_canvas1">First</a></li>
                <li><a href="#map_canvas2">Second</a></li>
                <li><a href="#map_canvas3">Third</a></li>
            </ul>
            <div id="map_canvas1" class="map_canvas">
            </div>
            <div id="map_canvas2" class="map_canvas">
            </div>
            <div id="map_canvas3" class="map_canvas">
            </div>
        </div>
    </body>

}

google.maps.event.addDomListener（窗口“加载”，初始化）

我的HTML正文看起来像

function initialize() {
var map_canvas1 = document.getElementById('map_canvas1');
var map_canvas2 = document.getElementById('map_canvas2');
var map_canvas3 = document.getElementById('map_canvas3');

var map_options1 = {
  center: new google.maps.LatLng(44.5403, -78.5463),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map_options2 = {
  center: new google.maps.LatLng(44.5403, -78.5463),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};

var map_options3 = {
  center: new google.maps.LatLng(44.5403, -78.5463),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.TERRAIN 
};
var map1 = new google.maps.Map(map_canvas1, map_options1);
var map2 = new google.maps.Map(map_canvas2, map_options2);
var map3 = new google.maps.Map(map_canvas3, map_options3);

      <body>
        <div id="tabs">
            <ul>
                <li><a href="#map_canvas1">First</a></li>
                <li><a href="#map_canvas2">Second</a></li>
                <li><a href="#map_canvas3">Third</a></li>
            </ul>
            <div id="map_canvas1" class="map_canvas">
            </div>
            <div id="map_canvas2" class="map_canvas">
            </div>
            <div id="map_canvas3" class="map_canvas">
            </div>
        </div>
    </body>

但第二张和第三张地图显示不正确。

当我遇到这个问题时，我通常会通过添加

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

这将使地图恢复到全宽和全高。

我测试了这一点，我唯一更改的是在.map\u canvas类中定义一个宽度！

.map\u canvas{width:800px；height:600px；}

map\u canvas1X的CSS样式规则是什么？检查我是否编辑了问题。在哪里使用它？在initialize（）中？我认为只要它是在“创建”映射之后使用的。当有人单击某个选项卡时，我会将其放置，以便您知道他们需要该映射。在调用调整大小事件后，映射将消失。这可能有助于：