We will decompress!Only the information window on the first line in json is loaded.google.maps.event.addListener(marker, 'click', function() {
if (infoWindow) {
infoWindow.close();
}
infoWindow.open(map, marker);
});
aboveclickされる an eventfunctionwhen runninginfowindowThis is because we refer to the last instance.For closure, please refer to the following site. https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures I made two s pets below.※The ajax part has been removed, so it is slightly changed.Solution 1 console = null; // warningを表示しないようnullで(ry
var currentInfoWindow = null;
function createClickCallback(marker, infoWindow) {
return function() {
if (currentInfoWindow){
currentInfoWindow.close();
}
infoWindow.open(marker.getMap(), marker);
currentInfoWindow = infoWindow;
};
}
function initialize(data){
var opts = {
zoom: 16,
center: new google.maps.LatLng(35.6954806, 139.76325010000005),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),opts);
var i=data.length;
while(i-- >0){
var dat = data[i];
var marker=new google.maps.Marker({
position:new google.maps.LatLng(dat.lat,dat.lng),
map:map
});
var infoWindow = new google.maps.InfoWindow({
content:'<div class="infoWindow">'+
'<h2>'+dat.title+'</h2>'+
'<p>'+dat.text+'</p>'+
'</div>'
});
google.maps.event.addListener(marker, 'click', createClickCallback(marker, infoWindow));
}
}
var data = [
{"title": "TAM 東京" ,"lat": "35.6954806" ,"lng": "139.76325010000005" ,"text": "ここにTAM 東京がある"},
{"title": "小川町駅" ,"lat": "35.6951212" ,"lng": "139.76610649999998" ,"text": "ここに小川町駅がある"},
{"title": "淡路町駅" ,"lat": "35.69496" ,"lng": "139.76746000000003" ,"text": "ここに淡路町駅がある"},
{"title": "御茶ノ水駅" ,"lat": "35.6993529" ,"lng": "139.76526949999993" ,"text": "ここに御茶ノ水駅がある"},
{"title": "神保町駅" ,"lat": "35.695932" ,"lng": "139.75762699999996" ,"text": "ここに神保町駅がある"},
{"title": "新御茶ノ水駅" ,"lat": "35.696932" ,"lng": "139.76543200000003" ,"text": "ここに新御茶ノ水駅がある"}
];
initialize(data); <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<div id="map" style="width: 740px; height: 400px;"></div>Solution 2ormarkerHomeinfoWindowThe definition is a limited scope in the blockletIt works well when you change to.let marker=new google.maps.Marker({ ...
...
let infoWindow = new google.maps.InfoWindow({
console = null; // warningを表示しないようnullで(ry
var currentInfoWindow = null;
function initialize(data){
var opts = {
zoom: 16,
center: new google.maps.LatLng(35.6954806, 139.76325010000005),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),opts);
var i=data.length;
while(i-- >0){
var dat = data[i];
let marker=new google.maps.Marker({
position:new google.maps.LatLng(dat.lat,dat.lng),
map:map
});
let infoWindow = new google.maps.InfoWindow({
content:'<div class="infoWindow">'+
'<h2>'+dat.title+'</h2>'+
'<p>'+dat.text+'</p>'+
'</div>'
});
google.maps.event.addListener(marker, 'click', function() {
if (currentInfoWindow) {
currentInfoWindow.close();
}
infoWindow.open(map, marker);
currentInfoWindow = infoWindow;
});
}
}
var data = [
{"title": "TAM 東京" ,"lat": "35.6954806" ,"lng": "139.76325010000005" ,"text": "ここにTAM 東京がある"},
{"title": "小川町駅" ,"lat": "35.6951212" ,"lng": "139.76610649999998" ,"text": "ここに小川町駅がある"},
{"title": "淡路町駅" ,"lat": "35.69496" ,"lng": "139.76746000000003" ,"text": "ここに淡路町駅がある"},
{"title": "御茶ノ水駅" ,"lat": "35.6993529" ,"lng": "139.76526949999993" ,"text": "ここに御茶ノ水駅がある"},
{"title": "神保町駅" ,"lat": "35.695932" ,"lng": "139.75762699999996" ,"text": "ここに神保町駅がある"},
{"title": "新御茶ノ水駅" ,"lat": "35.696932" ,"lng": "139.76543200000003" ,"text": "ここに新御茶ノ水駅がある"}
];
initialize(data); <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<div id="map" style="width: 740px; height: 400px;"></div>
