如何创建两个谷歌地图
How to create two google maps
我想知道如何为两家公司嵌入两个不同的谷歌地图与信息窗口。这是样本一,我想要两张不同的地图。我要两张不同的地图。同一个地图上不能有两个信息窗口
谢谢。
用两个div代替一个:
...
<div id="map1"></div>
<div id="map2"></div>
...
然后添加javascript代码来创建两个地图:
function initMap(mapName, lat, lng, title, content) {
var map = new google.maps.Map(document.getElementById(mapName), {
zoom: 4,
center: {lat: lat, lng: lng}
});
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
position: coords,
map: map,
title: title
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
var contentUrulu = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var
contentWhatever = '...';
initMap('map1', -25.363, 131.044, 'Uluru (Ayers Rock)', contentUrulu);
initMap('map2', 46.106,7.049, 'Whatever', contentWhatever);
相关文章:
- 用两个手指旋转谷歌地图javascript中的地图
- 无法从 .each 循环加载谷歌地图上的两个标记
- 谷歌地图API JS-放置两个组合字段的自动完成
- 在谷歌地图的一个信息框中组合两个标记的内容
- 使用两个不同表中的值在一个谷歌地图上显示标记
- 如何将两个位置添加到同一个网站的谷歌地图中
- 是否可以在单个html文件中添加两个谷歌地图API(绘图和几何)
- 谷歌地图多个标记与自定义标记和OnClick Zoom
- 在谷歌地图 JS API 上获取两个点之间的点的纬度和经度(按百分比)
- 两个网络组件之间的绑定:谷歌地图+地理定位
- 谷歌地图多个标记.我的代码有什么问题
- 谷歌地图多个标记
- 谷歌地图多个标记简单过滤
- 谷歌地图-多个InfoWindows
- 谷歌地图多个自定义标记
- 谷歌地图:多个InfoWindows总是显示最后的值
- 谷歌地图-多个标记- 1 InfoWindow问题
- 融合表谷歌地图第二个Javascript下拉菜单不工作
- 谷歌地图-多个标记从外部json
- 谷歌地图-多个标记从数据库- phpsqlajax - Java