Duplicate click event listeners for different markers : google maps

Question

Introduction

I am working with google maps, displaying markers having different infoWindow. I am making an ajax call to update the map markers with related info windows. After successful ajax call, map render function called and map updated 'rightly'.

Problem After ajax call, map updated but the problem is that each marker has the same duplicate infowindow. In other words, infowindow is not binding with markers respectively.

Javascript Code

I am sure problem is on clickEventListener. Comments are for info.

//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);
                        },
                    });

                }

I am trying to figure out what has gone wrong and now turned to SO, if anyone have idea or knowledge for this problem, please do help. Thanks for your time.

Answer 1

Check the great answer by Leigh here

The problem is the way how you create info window, not the event handler I think.