Googleマップのマルチマーカースクリプトで問題が発生しました。複数のマーカーがあり、場所の外部リンクをクリックすると地図が特定のgoogle lat、lonに表示されます。地図マーカー情報が表示されない
しかし、私はすべてのmarker.if上の情報ボックスを持っていることがわかります私は地図のマーカーをクリックして情報ボックスを開きます。外付けのズームリンクをクリックするとマーカーの情報ボックスは表示されませんでした。
誰でもこの問題で私を助けることができます。下記のリンクの例をご確認ください
http://saudisoftechportal.us/map.html
問題がある、あなたは、外部リンク、必要な緯度経度にresetMap方法パンをクリックして、与えられたzoomlevelにズーム、しかしで情報ウィンドウを開いていないときマーカー。おそらく、マーカー配列も場所によって使い分けるべきでしょう。ここ は、あなたの問題のためのサンプルです：
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 400px;
}
.maker{ margin:auto;}
.maker li{ list-style:none; float:left; width:100%; margin-bottom:8px;}
.maker li img{ width:34px; height:34px; display:block; float:left;}
.maker li span{ display: block; float: left; line-height: 27px; font-weight: bold; margin-left: 10px;}
</style>
</head>
<body>
<div id="map"></div>
<div class="span4">
<ul id="markerul" class="maker">
</ul>
</div>
<script type="text/javascript">
var map;
var infowindow;
var marker;
var markers = [];
var locations = [
['<strong>Head Office Khobar</strong>', 26.3411159,50.1936446,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',0],
['<strong>Dammam Office</strong>', 26.409727,50.1314224,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',1],
['<strong>Khafji Office</strong>', 28.4155603,48.509478,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',2],
['<strong>Riyadh Office</strong>', 24.6717577,46.7262669,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',3],
['<strong>Jeddah Office</strong>', 21.5228383,39.1793113,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',4],
['<strong>Warehouse</strong>', 26.4152548,50.1606446,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',5],
['<strong>Workshop</strong>', 26.4146399,50.156845,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',6],
['<strong>PMT Office</strong>', 14.576208,120.997944,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',7]
];
function initMap(){
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
scrollwheel: false,
center: new google.maps.LatLng(23.884248, 45.078492),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
infowindow = new google.maps.InfoWindow();
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
listFill();
}
function resetMap(elem, zoom) {
var newPos = new google.maps.LatLng(locations[elem][1], locations[elem][2]);
infowindow.setContent(locations[elem][0]);
infowindow.open(map, markers[elem]);
map.setZoom(zoom);
map.panTo(newPos);
};
function listFill(){
$('#markerul ul').html('');
for (var i = 0; i < locations.length; i++) {
var liItem = '<li><a href="javascript:void(0);" onclick="resetMap(' + i + ',15);"><img src="' + locations[i][3] + '" alt="' + locations[i][0] + '"/><span>' + locations[i][0] + '</span></a></li>';
$('#markerul').append(liItem);
};
};
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
私はそれが役に立てば幸い！
コードを表示できますか –