마커가 두 번 이상 렌더링됩니다.

Question

Google지도 v3을 구현했습니다. bounds_changed 이벤트 동안 업데이트되지만 이벤트가 트리거되면 마커가 두 번 이상 렌더링됩니다.

마커 관리자에게 제조업체를 추가했습니다.

 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") + '"><a href="javascript:markerClick(' + i + ');">' + name + '</a></li>'; 
     } 

     function markerClick(i) { 
      google.maps.event.trigger(markersArray[i], "click"); 
     } 

Answer 1

그냥 복사 - 붙여 넣기 오류 일 수 있지만,이 코드가 올바른 ('정보창'의 두 선언과 중복을, 말)하지 않는 것 : 여기 또한

var infowindow = infowindow = new google.maps.InfoWindow({});; 

당신은 {}

var myOptions = ({ 
       center: new google.maps.LatLng(47.6145, -122.3418), 
       zoom: 13, 
       mapTypeId: 'roadmap' 
      }); 

당신이 JSLint 같은 것을 통해 JS 코드를 실행 제안 주변()가 필요하지 않습니다.