Markers render more than once - google-maps

Question

i've implemented google maps v3, it updates while bounds_changed event but the problem is when the event triggers it renders the markers more than once, any suggestions.
i've added the makers to marker manager.
var map = null;
var myLatLng = null;
var sidebarHtml = "";
var infowindow = infowindow = new google.maps.InfoWindow({});;
var mgr = null;
var currentBounds = null;
var xml = null;
var markers = null;
var markersArray = [];
var customIcons = {
restaurant: {
icon: 'images/icon_01.png'
},
bar: {
icon: 'images/icon_02.png'
}
}
function load() {
var myOptions = ({
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
mgr = new MarkerManager(map, {fitBounds: true});
google.maps.event.addListener(map, 'bounds_changed', downloadUrl);
}
function downloadUrl() {
var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest;
var params = "";
var url = "phpmysqlajax_genxml.php";
request.onreadystatechange = function() {
if(request.readyState == 4) {
//alert(request.responseXML);
useTheData(request);
}
};
request.open("GET", url + params, true);
request.send(null);
}
function useTheData(data) {
currentBounds = map.getBounds();
xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
mgr.clearMarkers();
if (!currentBounds) currentBounds = new google.maps.LatLngBounds();
sidebarHtml = '<ul class="sidebar">';
for(var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var type = markers[i].getAttribute("type");
var latlng = new google.maps.LatLng(lat, lng);
if (currentBounds.contains(latlng)) {
attachMarker( name, address, latlng, type );
markerSidebarEntry(i);
}
}
sidebarHtml += "</ul>";
document.getElementById("sidebar").innerHTML = sidebarHtml;
};
function attachMarker( name, address, latlng, type ) {
var marker = new google.maps.Marker({
position : latlng,
map: map,
icon : customIcons[type].icon
});
mgr.addMarker(marker, 5);
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent( address );
infowindow.open(map, this);
});
// add marker here.
}
function markerSidebarEntry(i) {
var name = markers[i].getAttribute("name");
sidebarHtml += '<li class="' + markers[i].getAttribute("type") + '">' + name + '</li>';
}
function markerClick(i) {
google.maps.event.trigger(markersArray[i], "click");
}

Answer 1

It may just be a copy-paste error, but this code doesn't seem correct (double-declaration of 'infowindow' and duplicated ; at the end):
var infowindow = infowindow = new google.maps.InfoWindow({});;
Also here you don't need the () surrounding the {}
var myOptions = ({
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
Suggest you run your JS code through something like JSLint.