在一个页面上两次渲染相同的Google地图

Question

我正在开发一个使用CSS＆＃39;标签的Rails应用程序。分开表格。我需要在两个标签中渲染相同的谷歌地图，但地图只会附加到第一个#map_canvas div。我目前所拥有的：

# form.html.erb

<div class='tabs'>
  <div id='tab1'>
    <div class="map container">
      <div id="map_canvas"></div>
    </div>
  </div>
  <div id='tab2'>
    <div class="map container">
      <div id="map_canvas"></div>
    </div>
  </div>
</div>

# map.js

map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

我的第一次尝试是将地图渲染为局部，并引用两次，但效果相同。

有没有办法正确地做到这一点？

Answer 1

ID在页面中应该是唯一的，您使用了＆＃39; map_canvas＆＃39;在页面中两次。您可以尝试使用类

，而不是使用Id

 <div class='tabs'>
  <div id='tab1'>
    <div class="map container">
      <div class="map_canvas"></div>
    </div>
  </div>
  <div id='tab2'>
    <div class="map container">
      <div class="map_canvas"></div>
    </div>
  </div>
</div>

#js
 map = new google.maps.Map(document.getElementsByClassName("map_canvas"),mapOptions);

Answer 2

<div class='tabs'>
  <div id='tab1'>
    <div class="map container">
      <div class="map_canvas"></div>
    </div>
  </div>
  <div id='tab2'>
    <div class="map container">
      <div class="map_canvas"></div>
    </div>
  </div>
</div>

map.js

map1 = new google.maps.Map(document.getElementsByClassName("map_canvas")[0],mapOptions);
map2 = new google.maps.Map(document.getElementsByClassName("map_canvas")[1],mapOptions);