谷歌在同一页面上映射两张地图

时间:2013-12-20 09:16:47

标签: javascript google-maps twitter-bootstrap

我现在正在将此代码用于我的网站 - > http://bootply.com/98836

但我需要在同一页面中有两张地图 所以我复制它,只是改变'div id'

第一张地图是

<div id="map-canvas"></div>
<span id="map-input"> address </span>

和第二张地图是

<div id="maps-canvas"></div>
<span id="maps-input"> address </span>

我为它制作了.js

但它不起作用 它会在第一张地图中找到两个地址

我该如何解决????????

2 个答案:

答案 0 :(得分:3)

只要您不多次使用ID,就可以在页面上拥有任意数量的地图。 你有2个#map-canvas,所以javascript不知道你的意思。

更改ID,并在每个div上创建一个地图:

<div id="map-canvas-first"></div>
<span id="map-input-first"> address </span>


<div id="maps-canvas-second"></div>
<span id="maps-input-second"> address </span>


mapFirst = new google.maps.Map(document.getElementById('map-canvas-first'),mapOptions);
mapSecond = new google.maps.Map(document.getElementById('map-canvas-second'),mapOptions);

答案 1 :(得分:0)

请不要使用id两次。 ID是唯一的

也许这会有所帮助:

How to Display Multiple Google Maps per page with API V3