Javascript 鼠标单击信息窗口仅适用于一个标记

我有一个带有5个标记的地图，我需要一个信息窗口来显示鼠标上的每个标记。单击，我有一个信息窗口可以工作。但是，当我为另一个标记的另一个信息窗口添加代码/数据时，它不起作用（即，我单击爱丁堡的标记并显示一个气泡，但图表不显示，当我单击因弗内斯标记时，什么也不显示）

链接到JSFIDLE文件：

代码片段：我目前有一个2/5标记的信息窗口的数据

google.charts.load('current', {packages: ['corechart']});

 function drawChart(map, marker) {
//set up data
var data = google.visualization.arrayToDataTable([
['Genre', '#'],
['Science Fiction', 55],
['Comedy', 33],
['Thriller', 21],
['Action', 63],
['Romance', 17], 
]);

   //set up any options
var options = {
title: 'Film Genre Preferences'
};

//Create node
 var node = document.createElement('div'),
 infoWindow = new google.maps.InfoWindow(),
 chart = new google.visualization.BarChart(node);

 //chjjeck which marker it is
 if (marker.id == 'c4') {
 chart.draw(data, options);

 }
   infoWindow.setContent(node);
  infoWindow.open(map,marker);
}


   google.charts.load('current', {packages: ['corechart']});
function drawChart(map, marker) {
//set up data
var data = google.visualization.arrayToDataTable([
['Genre', '#'],
['Science Fiction', 41],
['Comedy', 27],
['Thriller', 13],
['Action', 15],
['Romance', 19], 
]);

   //set up any options
var options = {
title: 'Film Genre Preferences'
};

//Create node
 var node = document.createElement('div'),
 infoWindow = new google.maps.InfoWindow(),
 chart = new google.visualization.BarChart(node);

 //chjjeck which marker it is
 if (marker.id == 'c1') {
 chart.draw(data, options);

 }
   infoWindow.setContent(node);
  infoWindow.open(map,marker);
}


// Initialize and add the map
 function initMap() {

  //The location of Inverness
  var inverness = {lat: 57.480819, lng: -4.224250};
  var city1 = {position: inverness};
  // The map, centered at Inverness
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: inverness});
      // The marker positioned at Inverness
var marker1 = new google.maps.Marker({position: inverness, map: map, id: 'c1', title: 'Number Of Cinemas: 2'});

 //The location of Dundee
  var dundee = {lat: 56.467546, lng: -2.969593};
  var city2 = {position: dundee};
  // The marker, positioned at Dundee
  var marker2 = new google.maps.Marker({position: dundee, map: map, id: 'c2', title: 'Number Of Cinemas: 2'});

//The location of Glasgow
  var glasgow = {lat: 55.875362, lng: -4.250252};
  var city3 = {position: glasgow};
  // The marker, positioned at Glasgow
  var marker3 = new google.maps.Marker({position: glasgow, map: map, id: 'c3', title: 'Number Of Cinemas: 11'});

  //The location of Edinburgh
    var edinburgh = {lat: 55.959425, lng: -3.189161};
    var city4 = {position: edinburgh};
    // The marker, positioned at Edinburgh
  var marker4 = new google.maps.Marker({position: edinburgh, map: map, id: 'c4', title: 'Number Of Cinemas: 3'}); 


  //The location of Aberdeen
  var aberdeen = {lat: 57.155988, lng: -2.095139};
  var city5 = {position: aberdeen};
  // The marker, positioned at Aberdeen
  var marker5 = new google.maps.Marker({position: aberdeen, map: map, id: 'c5', title: 'Number Of Cinemas: 3'});
  marker4.addListener('click', function() {
  drawChart(map,this);
  });
  } 

---

您的数据到处都是，不要用位置名称创建无用的变量。
您已经了解了JS中的数据结构！使用它们

const locations = [{
    id: 'c1',
    name: 'inverness',
    title: 'Number Of Cinemas: 2',
    lat: 57.480819,
    lng: -4.224250,
    chart: [
      ['Genre', '#'],
      ['Science Fiction', 55],
      ['Comedy', 33],
      ['Thriller', 21],
      ['Action', 63],
      ['Romance', 17],
    ]
  },
  // Etc.....
]

相比之下，为了得到想要的一切变得简单得多。只需循环您的数据：

locations.forEach(loc => initMarker(loc, map, infowindow));

例如：

const位置=[{
id:'c1'，
名称：“因弗内斯”，
标题：“电影院数量：2”，
拉脱维亚：57.480819，
液化天然气：-4.224250，
图表：[
[“体裁”、“#”]，
[《科幻小说》，55]，
[《喜剧》，33]，
['Thriller'，21]，
[‘行动’，63]，
[‘浪漫’，17]，
]
},
{
id:'c2'，
名称：“邓迪”，
标题：“电影院数量：2”，
拉脱维亚：56.467546，
液化天然气：-2.969593，
图表：[
[“体裁”、“#”]，
[‘科幻小说’，41]，
[《喜剧》，27]，
[‘惊悚’，13]，
[‘行动’，15]，
[‘浪漫’，19]，
]
},
{
id:'c3'，
名称：“格拉斯哥”，
标题：“电影院数量：11”，
拉脱维亚：55.875362，
液化天然气：-4.250252，
图表：[
[“体裁”、“#”]，
[《科幻小说》，10]，
[《喜剧》，45]，
['Thriller'，63]，
[‘行动’，15]，
[‘浪漫’，7]，
]
},
{
id:'c4'，
名称：“爱丁堡”，
标题：“电影院数量：3”，
拉脱维亚：55.959425，
液化天然气：-3.189161，
图表：[
[“体裁”、“#”]，
[《科幻小说》，23]，
[‘喜剧’，61]，
['Thriller'，7]，
[‘行动’，66]，
[‘浪漫’，46]，
]
},
{
id:'c5'，
姓名：‘香港仔’，
标题：“电影院数量：3”，
拉脱维亚：57.155988，
液化天然气：-2.095139，
图表：[
[“体裁”、“#”]，
[《科幻小说》，36]，
[‘喜剧’，9]，
[Thriller'，13]，
[‘行动’，56]，
[‘浪漫’，34]，
]
},
];
功能信息窗口内容（loc）{
var EL_infowindow=document.createElement（'div'）；
变量选项={
标题：`${loc.name}电影类型首选项`
};
var chart=新的google.visualization.BarChart（EL_infowindow）；
var data=google.visualization.arrayToDataTable（loc.chart）；
图表绘制（数据、选项）；
EL_infowindow.id='infowindow'；
返回EL_信息窗口；
}
函数initMarker（位置、地图、信息窗口）{
var marker=new google.maps.marker({
位置：新google.maps.LatLng（loc.lat，loc.lng），
地图：地图
});
google.maps.event.addListener（标记'click'，函数（）{
infowindow.close（）；//关闭以前打开的infowindow
setContent（infowindowContent（loc））；
信息窗口。打开（地图、标记）；
});
}
//初始化并添加映射
函数initMap（）{
google.charts.load（'current'{
软件包：['corechart']
});
var map=new google.maps.map（document.getElementById（'map'）{
缩放：6，
中心：新建google.maps.LatLng（位置[0]。lat，位置[0]。lng）
});
var infowindow=new google.maps.infowindow（）；//一个实例
forEach（loc=>initMarker（loc，map，infowindow））；
}

#地图{
高度：400px；
宽度：100%；
}

您有两个名为

drawChart

的函数，它们无法工作。制作一个绘制图表的函数，将所需的数据传递给它。谢谢！！如果这回答了你的问题，你就是救命恩人