在一页上渲染两次相同的Google Map

Question

我正在使用CSS“选项卡”分隔表单的Rails应用程序。 我需要在两个标签中渲染相同的Google地图，但该地图仅附加到第一个#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在页面内应该是唯一的，您在页面中两次使用过“ map_canvas”。 除了使用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);