重複クリックイベントリスナー：Googleマップ

Question

はじめ

私は別の情報ウィンドウを持つマーカーを表示し、Googleマップで働いています。私は地図マーカーを関連情報ウィンドウで更新するためにajax呼び出しを行っています。成功したajax呼び出しの後、呼び出されたマップ関数がマップされ、マップが「正しく」更新されました。

問題 は、AJAX呼び出した後、マップが更新されますが、問題は、各マーカーが同じ重複情報ウィンドウを持っているということです。言い換えれば、情報ウィンドウはマーカーとそれぞれ結合していません。

Javascriptのコード

私はこの問題はclickEventListenerであると確信しています。コメントは情報です。

//map rendering start 
       function renderMap(dd) { 
        console.log('after ', dd); 
        for (var a = 0; a < dd; a++) { 
         console.log('after ', dd); 
        } 
        var dataArr = []; 
        var mapProp = { 
         center: abc, 
         zoom: 12, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 
        map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

        for (var a = 0; a < dd.length; a++) { 
         dataArr.push({ location: new google.maps.LatLng(dd.location.coordinates[1], dd.location.coordinates[0]), weight: 2 }); 
         var contentString = dd; 
         var infowindow = new google.maps.InfoWindow({ 
          content: contentString 
         }); 

         var marker = new google.maps.Marker({ 
          position: { lat: dd.location.coordinates[1], lng: dd.location.coordinates[0] }, 
          label: "B", 
          map: map 
         }); 
         console.log("before event listener", contentString);//Correctly displayed 
         google.maps.event.addListener(marker, 'click', function() { 
          //when click on marker, console is logged 
          console.log("after event listener", contentString);//Wrongly log same contentString 
          infowindow.open(map.get('map'), marker); 
         }); 

          // Add circle overlay and bind to marker 
          var circle = new google.maps.Circle({ 
           map: map, 
           radius: 5000, // 10 miles in metres 
           fillColor: '#4682b4' 
          }); 

         circle.bindTo('center', marker, 'position'); 
         //console.log(e.location] + ',' + e.location.coordinates[0]); 

         //start of inner for 
        } 
        var heatmap = new google.maps.visualization.HeatmapLayer({ 
         data: dataArr 
        }); 
       } 
       //map rendering end 
       function ajaxHeatMapHandler() { 
        var dataEl = $('#heatmapFilterArea'); 

        var data = {}; 

        //make ajax resquest 
        $.ajax({ 
         type: "POST", 
         url: "/", 
         data: data, 
         success: function (response, status) { 
          heatmapTitle.text(responselength + ' entries'); 
          renderMap(response); 
         }, 
        }); 

       } 

私が間違って、今誰もがこの問題のためのアイデアや知識を持っている場合はSO、ヘルプをしてくださいになったかを把握しようとしています。御時間ありがとうございます。

Answer 1

チェックリーhere

問題によって大きな答えは、あなたが、私は考えていないイベントハンドラを情報ウィンドウを作成する方法の方法です。