title: Pins disappearing on bing maps when map is panned
body: <p>I'm trying to produce a mapping application with Bing Maps with a button that will retrieve a JSON string and places pins on the map based on the center of the map. </p>
  
  <p>That is working fine, but I'm running into two issues that I'm having trouble diagnosing. </p>
  
  <p>The first is that when I move the map after placing the pins, the majority of them disappear from the map except for 1-3. I've figured out that the pins are still being held in map.entities, but just aren't all displaying.</p>
  
  <p>The second issue is that I have a click event on the pins, and sometimes when I click on a pin it will disappear (and sometimes reappear elsewhere on the map). </p>
  
  <p>Here is my code:</p>
  
  <pre><code>function addPin() {
      map.entities.clear();    
      var pinImg = "images/MapPin.jpg";    
      var latLong = {};
      var name;   
  
      for (var i = 0; i &lt; factualJson.response.data.length; ++i) {
  
          latLong['latitude'] = factualJson.response.data[i].latitude;
          latLong['longitude'] = factualJson.response.data[i].longitude;
          name = factualJson.response.data[i].name;
  
          var pin = new Microsoft.Maps.Pushpin(latLong, {
              icon: pinImg,
              anchor: new Microsoft.Maps.Point(latLong['latitude'], latLong['longitude']),
              draggable: true,
              width: 48,
              height: 48
          });
  
          Microsoft.Maps.Events.addHandler(pin, 'click', displayName);
          pin.title = name;
          pin.id = 'pin' + i;
          map.entities.push(pin);             
      }
  
      document.getElementById("arrayLength").innerHTML = "Number of locations: " +            map.entities.getLength();     
  }
  
  function displayName(e) {
  
      document.getElementById("name").innerHTML = "";
  
      if (this.target.id  != -1) {        
          document.getElementById("name").innerHTML = this.target.title;
      }
  }
  
  function boot() {
      Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', { callback: getMap });    
  }
  
  function getMap() {    
      map = new Microsoft.Maps.Map($gel("bingMap"), {
          credentials: getKey(),
          customizeOverlays: true,
          enableClickableLogo: true,
          enableSearchLogo: true,
          showDashboard: true,
          showBreadcrumb: true,
          showCopyright: true,
          zoom: 10,
          labelOverlay: Microsoft.Maps.LabelOverlay.hidden
      });        
  
      setGeoLocation();
      //setTimeout(optimizeMap, 100);
  
      window.onresize = resizeWin;
      resizeWin();
  }
  </code></pre>
  
  <p>Currently I make an ajax call from the button, and the callback function calls 'AddPin' which adds the pins to the map. I thought I'd add in the map initialization code in case it was relevant. Currently boot() is called on body load. </p>