showing same details on click of marker using infobubble..

See more:

Javascript

HTML

Google-Maps

Hi all,
I am facing a little problem here.On page load,its showing all the markers.But when I close all markers and again click on markers,its only showing same marker in all.

var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
                {
                 "lat":'<%# Eval("LATITUDE") %>',
                "lng": '<%# Eval("LONGITUDE") %>',
                 "mRow": '<%# Eval("Row") %>',
                "title": '<%# Eval("USERID") %>',
                "ParId": '<%# Eval("PARID") %>',
                "RANK": '<%# Eval("RANK") %>',
                "Capturedby": '<%# Eval("CAPTUREDBY") %>',
                 "Capturedate": '<%# Eval("CAPTUREDATE") %>',
                 "IMAGEPATH": '<%# Eval("IMAGEPATH") %>'

            }
    </ItemTemplate>
    <SeparatorTemplate>
        ,
    </SeparatorTemplate>
    </asp:Repeater>
    ];
</script>

<script type="text/javascript">
  z  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,
            animation: google.maps.Animation.DROP

        });


     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.setContent(data);
             //infoBubble.setContent(html);
             infoBubble.close();
             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);