谷歌在同一页面上映射两个地图[重复]答案

【问题标题】：google maps two maps on same page [duplicate]谷歌在同一页面上映射两个地图[重复]
【发布时间】：2014-01-09 02:34:12
【问题描述】：

我现在在我的网站上使用这个代码 -> 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

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

怎么解决？？？？？？

【问题讨论】：

标签： javascript google-maps twitter-bootstrap

【解决方案1】：

您可以在一个页面上拥有任意数量的地图，只要您不多次使用 ID。你有 2 个#maps-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);

【讨论】：

他的 id 是唯一的 map-canvas 和 maps-canvas 是不同的。

【解决方案2】：

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

也许这会有所帮助：

How to Display Multiple Google Maps per page with API V3

【讨论】：

他没有使用任何ID两次
嗯，根据他的帖子，他做到了。他为第一张和第二张地图发布的代码具有相同的 ID
#map-canvas 和 #maps-canvas 不一样