谷歌地图在同一页上的两个地图 [英] google maps two maps on same page

问题描述

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

但我需要同一页面中的两张地图
所以我复制它，只需更改'div id'

第一张地图是

 < div id =map-canvas>< / div> 
< span id =map-input>地址< / span> 
  

和第二张图是

 < div id =maps-canvas>< / div> 
< span id =maps-input>地址< / span> 
  

我为它制作了.js

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

我该如何解决这个问题???????

$ b $你可以在页面上拥有尽可能多的地图，只要你不多次使用一个ID即可。
你有2个＃maps-canvas，所以javascript不会知道你的意思。

更改ID，并在每个div上创建一个映射：

 < div id =map-canvas-first>< / div> 
< span id =map-input-first>地址< / span> 
 
 
< div id =maps-canvas-second>< / div> 
< span id =maps-input-second>地址< / span> 
 
 
 mapFirst = new google.maps.Map（document.getElementById（'map-canvas-first'），mapOptions）; 
 mapSecond = new google.maps.Map（document.getElementById（'map-canvas-second'），mapOptions）; 
  

well i'm using this code for my website now -> http://bootply.com/98836

but i need two of maps in same page so i duplicate it and just change 'div id'

first map is

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

and second map is

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

and i made .js for it

but its not working its gonna two address in first map

how can i solve it ???????

解决方案

You can have as many maps on a page as you want, aslong as you don't use an ID more than once. You have 2 of #maps-canvas, so javascript will not know which one you mean.

Change the IDs, and create a map on each 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);

这篇关于谷歌地图在同一页上的两个地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！