地図に描いた複数本の線をクリックした時、その線の名前を表示するコードの書き方

実現したいこと

地図上の線をクリックした時に、その線の名前をクリック位置に表示させたい。

発生している問題・エラーメッセージ

掲載したソースコードは2本の線(Ａ線とＢ線)を地図に描き(setMap)、
線をクリックした時(.event.addListener)に、その位置に線名を表示する。
ところが、表示内容部の「content: polyline.name」が”B線”しか表示しない。
どこを修正すれば良いのか教えて下さい

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <script src="https://maps.google.com/maps/api/js?&key= APIキー "></script>
</head>
<body>
   <div id="gmap" style="width:640px; height:500px;"></div>
   <script type="text/javascript">
   var gLines = [
      {'pathAry':[[35,139],[36,138]],'width':10,'name':'Ａ線'},
      {'pathAry':[[36,139],[37,138]],'width':20,'name':'Ｂ線'}
   ];
   var map = new google.maps.Map(
      document.getElementById("gmap"),{
         zoom : 7,
         center : new google.maps.LatLng(36, 139),
         mapTypeId : google.maps.MapTypeId.ROADMAP
      }
   );
   for (var i=0; i<gLines.length; i++) {
      var linePath = new google.maps.MVCArray();
         for (var wpIdx=0; wpIdx < gLines[i].pathAry.length; wpIdx++) {
            var wp = new google.maps.LatLng(gLines[i].pathAry[wpIdx][0], gLines[i].pathAry[wpIdx][1]);
            linePath.push(wp);
         }
      var polyline = new google.maps.Polyline({path:linePath, strokeWeight:gLines[i].width, name:gLines[i].name});
      polyline.setMap(map);
      google.maps.event.addListener(polyline, "click", function(evt){
         var infowindow = new google.maps.InfoWindow({
            content: polyline.name,    //★Ａ線をクリックしても"Ｂ線"表示になる★
            position: evt.latLng
         });
         infowindow.open(map);
      });
   }   
   </script>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

ソースを読んだだけですので別のところが原因かもしれませんが
polyline が var で宣言されており、ホイスティングされて 1番目の for の外で宣言された扱いになっているせいではないでしょうか。

js
1   for (var i=0; i<gLines.length; i++) {
2      var linePath = new google.maps.MVCArray();
3         for (var wpIdx=0; wpIdx < gLines[i].pathAry.length; wpIdx++) {
4            var wp = new google.maps.LatLng(gLines[i].pathAry[wpIdx][0], gLines[i].pathAry[wpIdx][1]);
5            linePath.push(wp);
6         }
7      // ↓ var で宣言されている。
8      var polyline = new google.maps.Polyline({path:linePath, strokeWeight:gLines[i].width, name:gLines[i].name});
9      polyline.setMap(map);
10      google.maps.event.addListener(polyline, "click", function(evt){
11         var infowindow = new google.maps.InfoWindow({
12            content: polyline.name,  
13            position: evt.latLng
14         });
15         infowindow.open(map);
16      });
17   }

　

下記のように下記の部分を var から const （または let）にすればうまくいくかもしれません。

js
1   for (var i=0; i<gLines.length; i++) {
2      var linePath = new google.maps.MVCArray();
3         for (var wpIdx=0; wpIdx < gLines[i].pathAry.length; wpIdx++) {
4            var wp = new google.maps.LatLng(gLines[i].pathAry[wpIdx][0], gLines[i].pathAry[wpIdx][1]);
5            linePath.push(wp);
6         }
7      // ↓ const または let にする。
8      const polyline = new google.maps.Polyline({path:linePath, strokeWeight:gLines[i].width, name:gLines[i].name});
9      polyline.setMap(map);
10      google.maps.event.addListener(polyline, "click", function(evt){
11         var infowindow = new google.maps.InfoWindow({
12            content: polyline.name,  
13            position: evt.latLng
14         });
15         infowindow.open(map);
16      });
17   }