2 谷歌地图在一个子页面上
2 Google Maps on one subpage
我在谷歌地图上遇到问题，我想在一个子页面上添加两个谷歌地图，但有一个错误 - 通过单击一张地图上的标记，发生在第二张地图上。有关地点的信息只能在一张地图上看到。
<!DOCTYPE HTML>
<html>
<head>
<title>Maps</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/google_maps.js"></script>
</head>
<body onload="initialize()">
<div id="map1" style="width: 600px; height: 360px;"></div>
<div id="map2" style="width: 600px; height: 360px;"></div>
</body>
</html>
JavaScript
var markerone = [
[0, 51.504827, -0.07862599999998565, 'City hall of London', '', '', '', '', '', ''],
]
var markertwo = [
[0, 54.34879, 18.65256899999997, 'City hall of Gdańsk', '', '', '', '', '', ''],
]
var markerMemo = null;
var infowindow = null;
var info = new google.maps.InfoWindow({
maxWidth: 230
});
var map;
function initialize() {
var myOptionsMap1 = {
zoom: 14,
center: new google.maps.LatLng(51.50489356890002,-0.07370204693610383),
disableDefaultUI: true,
navigationControl: true,
panControl: true,
zoomControl: true,
rotateControl: true,
overviewMapControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map1"), myOptionsMap1);
for(var i in markerone) {
infowindow = '<div class="widows-map"><strong>' + markerone[i][3] + '</strong><p>';
if (markerone[i][6] && !markerone[i][7]) {
infowindow += markerone[i][6] + '</p>';
}
if (markerone[i][6] && markerone[i][7]) {
infowindow += '<a href="' + markerone[i][7] + '">' + markerone[i][6] + '</a></p>';
}
if (markerone[i][8]) {
infowindow += markerone[i][8] + '<br />';
}
if (markerone[i][9]) {
infowindow += '<a href="http://maps.google.pl/maps?daddr=' + markerone[i][1] + ', ' + markerone[i][2] + '&hl=pl&ie=UTF8&z=' + map.getZoom() + '">How to go</a>';
}
'</div>'
if (markerone[i][4]) {
var markerOption =
{
map: map,
position: new google.maps.LatLng(markerone[i][1], markerone[i][2]),
title: markerone[i][3],
html: infowindow,
icon: document.getElementById('link').href + markerone[i][4],
shadow: markerone[i][5]
}
} else {
var markerOption =
{
map: map,
position: new google.maps.LatLng(markerone[i][1], markerone[i][2]),
title: markerone[i][3],
html: infowindow
}
}
var marker = new google.maps.Marker(markerOption);
if (infowindow) {
google.maps.event.addListener(marker, "click", function ()
{
info.setContent(this.html);
info.open(map, this);
});
} else {
infowindow = '';
}
if (i==0 && infowindow) {markerMemo = marker;}
}
if (markerMemo) google.maps.event.trigger(markerMemo, "click");
var myOptionsMap2 = {
zoom: 18,
center: new google.maps.LatLng(54.3488118865322,18.65266287731549),
disableDefaultUI: true,
navigationControl: true,
panControl: true,
zoomControl: true,
rotateControl: true,
overviewMapControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map2"), myOptionsMap2);
for(var i in markertwo) {
infowindow = '<div class="widows-map"><strong>' + markertwo[i][3] + '</strong><p>';
if (markertwo[i][6] && !markertwo[i][7]) {
infowindow += markertwo[i][6] + '</p>';
}
if (markertwo[i][6] && markertwo[i][7]) {
infowindow += '<a href="' + markertwo[i][7] + '">' + markertwo[i][6] + '</a></p>';
}
if (markertwo[i][8]) {
infowindow += markertwo[i][8] + '<br />';
}
if (markertwo[i][9]) {
infowindow += '<a href="http://maps.google.pl/maps?daddr=' + markertwo[i][1] + ', ' + markertwo[i][2] + '&hl=pl&ie=UTF8&z=' + map.getZoom() + '">How to go</a>';
}
'</div>'
if (markertwo[i][4]) {
var markerOption =
{
map: map,
position: new google.maps.LatLng(markertwo[i][1], markertwo[i][2]),
title: markertwo[i][3],
html: infowindow,
icon: document.getElementById('link').href + markertwo[i][4],
shadow: markertwo[i][5]
}
} else {
var markerOption =
{
map: map,
position: new google.maps.LatLng(markertwo[i][1], markertwo[i][2]),
title: markertwo[i][3],
html: infowindow
}
}
var marker = new google.maps.Marker(markerOption);
if (infowindow) {
google.maps.event.addListener(marker, "click", function ()
{
info.setContent(this.html);
info.open(map, this);
});
} else {
infowindow = '';
}
if (i==0 && infowindow) {markerMemo = marker;}
}
if (markerMemo) google.maps.event.trigger(markerMemo, "click");
}
你只有一个映射变量。 对于两个唯一映射，您需要两个映射变量。 就像你想要两个唯一的信息窗口（每个地图上一个）一样，你需要两个唯一的信息窗口变量（和两个唯一的标记变量）。
工作小提琴
工作代码片段：
var markerone = [
[0, 51.504827, -0.07862599999998565, 'City hall of London', '', '', '', '', '', ''],
]
var markertwo = [
[0, 54.34879, 18.65256899999997, 'City hall of Gdańsk', '', '', '', '', '', ''],
]
var markerMemo = null;
var infowindow = null;
var info = new google.maps.InfoWindow({
maxWidth: 230
});
var map;
function initialize() {
var myOptionsMap1 = {
zoom: 14,
center: new google.maps.LatLng(51.50489356890002, -0.07370204693610383),
disableDefaultUI: true,
navigationControl: true,
panControl: true,
zoomControl: true,
rotateControl: true,
overviewMapControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map1 = new google.maps.Map(document.getElementById("map1"), myOptionsMap1);
for (var i in markerone) {
infowindow = '<div class="widows-map"><strong>' + markerone[i][3] + '</strong><p>';
if (markerone[i][6] && !markerone[i][7]) {
infowindow += markerone[i][6] + '</p>';
}
if (markerone[i][6] && markerone[i][7]) {
infowindow += '<a href="' + markerone[i][7] + '">' + markerone[i][6] + '</a></p>';
}
if (markerone[i][8]) {
infowindow += markerone[i][8] + '<br />';
}
if (markerone[i][9]) {
infowindow += '<a href="http://maps.google.pl/maps?daddr=' + markerone[i][1] + ', ' + markerone[i][2] + '&hl=pl&ie=UTF8&z=' + map.getZoom() + '">How to go</a>';
}
'</div>'
if (markerone[i][4]) {
var markerOption = {
map: map1,
position: new google.maps.LatLng(markerone[i][1], markerone[i][2]),
title: markerone[i][3],
html: infowindow,
icon: document.getElementById('link').href + markerone[i][4],
shadow: markerone[i][5]
}
} else {
var markerOption = {
map: map1,
position: new google.maps.LatLng(markerone[i][1], markerone[i][2]),
title: markerone[i][3],
html: infowindow
}
}
var marker1 = new google.maps.Marker(markerOption);
if (infowindow) {
google.maps.event.addListener(marker1, "click", function() {
info.setContent(this.html);
info.open(map1, this);
});
} else {
infowindow = '';
}
if (i == 0 && infowindow) {
markerMemo = marker1;
}
}
if (markerMemo) google.maps.event.trigger(markerMemo, "click");
var myOptionsMap2 = {
zoom: 18,
center: new google.maps.LatLng(54.3488118865322, 18.65266287731549),
disableDefaultUI: true,
navigationControl: true,
panControl: true,
zoomControl: true,
rotateControl: true,
overviewMapControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map2 = new google.maps.Map(document.getElementById("map2"), myOptionsMap2);
for (var i in markertwo) {
infowindow = '<div class="widows-map"><strong>' + markertwo[i][3] + '</strong><p>';
if (markertwo[i][6] && !markertwo[i][7]) {
infowindow += markertwo[i][6] + '</p>';
}
if (markertwo[i][6] && markertwo[i][7]) {
infowindow += '<a href="' + markertwo[i][7] + '">' + markertwo[i][6] + '</a></p>';
}
if (markertwo[i][8]) {
infowindow += markertwo[i][8] + '<br />';
}
if (markertwo[i][9]) {
infowindow += '<a href="http://maps.google.pl/maps?daddr=' + markertwo[i][1] + ', ' + markertwo[i][2] + '&hl=pl&ie=UTF8&z=' + map.getZoom() + '">How to go</a>';
}
'</div>'
if (markertwo[i][4]) {
var markerOption = {
map: map2,
position: new google.maps.LatLng(markertwo[i][1], markertwo[i][2]),
title: markertwo[i][3],
html: infowindow,
icon: document.getElementById('link').href + markertwo[i][4],
shadow: markertwo[i][5]
}
} else {
var markerOption = {
map: map2,
position: new google.maps.LatLng(markertwo[i][1], markertwo[i][2]),
title: markertwo[i][3],
html: infowindow
}
}
var marker2 = new google.maps.Marker(markerOption);
if (infowindow) {
google.maps.event.addListener(marker2, "click", function() {
info.setContent(this.html);
info.open(map2, this);
});
} else {
infowindow = '';
}
if (i == 0 && infowindow) {
markerMemo = marker;
}
}
if (markerMemo) google.maps.event.trigger(markerMemo, "click");
}
google.maps.event.addDomListener(window, 'load', initialize);<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map1" style="width: 600px; height: 360px;"></div>
<div id="map2" style="width: 600px; height: 360px;"></div>相关文章：
- 调用一个“;默认瓦片”;在谷歌地图中
- 如何创建一个谷歌地图地理坐标数组
- 为位于路线上的谷歌地图标记(起点和终点）设置一个信息窗口
- 如何在谷歌地图中突出显示一个州点击一个国家的任何区域
- 使用谷歌地图:一个返回undefined的自定义javascript函数
- 谷歌地图API-获取信息窗口打开时，点击一个圆圈
- 从模态内部的主体复制一个谷歌地图
- 使用两个不同表中的值在一个谷歌地图上显示标记
- 如何制作一个谷歌地图标记，随着地图缩放而缩小/缩小大小
- 如何添加一个谷歌地图标记
- 我们可以知道一个谷歌地图是否已经初始化
- 如何隐藏一个谷歌地图圆圈对象后，不同的时间间隔
- 创建一个谷歌地图
- 显示一个谷歌地图上的引导模式
- 多个多边形与多种颜色在一个谷歌地图
- 包括3个图像在一个谷歌地图标记
- 值从返回，到一个谷歌地图功能
- 你能在虚拟元素中创建一个谷歌地图吗?
- 集成一个谷歌地图javascript API到博客
- 创建一个谷歌地图界面
