[英]Rendering same Google Map twice on one page
I'm working on a Rails app that uses CSS 'tabs' to separate a form. 我正在使用CSS“选项卡”分隔表单的Rails应用程序。 I need to render the same google map in two of the tabs, but the map is only being appended to the first
#map_canvas
div. 我需要在两个标签中渲染相同的Google地图,但该地图仅附加到第一个
#map_canvas
div中。 What I have currently: 我目前所拥有的:
# 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);
My first attempt was to render the map in a partial, and reference that twice, but it had the same effect. 我的第一个尝试是局部渲染地图,并两次引用该地图,但效果相同。
Is there a way to do this properly? 有没有办法正确地做到这一点?
An id should be unique within a page, you have used 'map_canvas' twice in the page. id在页面内应该是唯一的,您在页面中两次使用过“ map_canvas”。 Instead of using Id you can try with class
除了使用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);
<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>
map1 = new google.maps.Map(document.getElementsByClassName("map_canvas")[0],mapOptions);
map2 = new google.maps.Map(document.getElementsByClassName("map_canvas")[1],mapOptions);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.