-2
Google지도에 문제가 있습니다. 하나의 서브 페이지에 2 개의 Google지도를 추가하고 싶지만, 한 맵에서 마커를 클릭하면 오류가 발생합니다. 두 번째 맵에서 오류가 발생합니다. 장소 정보는 하나의지도에서만 볼 수 있습니다.하나의 서브 페이지에 2 개의 Google지도가 있습니다.
<!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>
자바 스크립트
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");
}
당신은 하나의'지도'변수를 가지고있다. 두 개의지도가있는 경우 두 개의 고유 한지도 변수가 있어야합니다. – geocodezip
나는 더 많은 정보를 요구한다. – frager