[SOLVED] Showing same marker details after close of markers using infobubbles

Showing same marker details after close of markers using infobubbles

Here in this small code snippet,I am facing a little problem.THe problem is if I close all the marker after page completely loaded.And again when I click on markers same detail display on all markers..Here is my code:

var map, infoBubble;

function onload() {

    var mapCenter = new google.maps.LatLng(13.0162476, 77.5073893);
    map = new google.maps.Map(document.getElementById('dvMap'), {
        zoom: 8,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    for (i = 0; i < markers.length; i++) {
        //icons[i];
        //alert("undefined icons" + icons[i]);
        var data = markers[i]
        //var myLatlng = new google.maps.LatLng(13.4162691, 77.5064153);
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Par Id  ' + data.ParId,
            icon: 'Google Marker/In/' + data.title + '.png'

        });

        if (data.RANK == "1") {
            data.RANK = "Primary";
        } else {
            data.RANK = "Secondary";
        }
        // alert(data.IMAGEPATH);
        var contentString = '<div id="content" align="left" >' +
            '<h1>Parcel Details</h1>' +
            '<h3>Parcel Id:' + data.ParId + '</h3>' +
            '<h3>Rank:' + data.RANK + '</h3>' +
            '<h3>Captured by:' + data.Capturedby + '</h3>' +
            '<h3>Captured Date:' + data.Capturedate + '</h3>' +
            '</div>';

        infoBubble = new InfoBubble({
            maxWidth: 300,
            maxHeight: 200,
            backgroundColor: 'rgb(236,255,255)'
        });

        infoBubble.open(map, marker);

        var div = document.createElement('DIV');
        div.align = "left";
        div.innerHTML = '<IMG BORDER="0" ALIGN="Left" width=97% height=200px alt="Pulpit rock1" SRC="' + data.IMAGEPATH + '"/>';

        infoBubble.addTab('Photo', div);
        infoBubble.addTab('Details', contentString);

        (function (marker, data) {
            google.maps.event.addListener(marker, 'click', function () {
                // if (!infoBubble.isOpen()) {
                infoBubble.open(map, marker);
                alert("Par Id:" + data.ParId);
                //alert("2");
                //}
                //infoWindow.open(map);
            });
            // alert(data.title);
            //google.maps.event.trigger(marker, 'click'); //stil

        }(marker, data));
    }
}

google.maps.event.addDomListener(window, 'load', onload);

Solution

the infoBubble-variable will be overwritten inside the loop.

Solution: pass the infoBubble as argument to the function that adds the click-listener:

    (function (marker, data , infoBubble) {
        google.maps.event.addListener(marker, 'click', function () {
            infoBubble.open(map, marker);
        });
    }(marker, data, infoBubble));