title: Strategy for lazy-loading markers into a Google Maps Javascript API map
body: <p>I'm building an ASP.NET MVC site where I want to have a Google Maps Javascript API map that shows markers loaded from my backend through AJAX.</p>
  
  <p>As I don't want the client to run into memory issues, I want to <strong>lazy-load the markers and apply them to Fluster2 to put them into clusters</strong>. I think the best way to lazy-load the markers is to add an event listener to the <code>idle</code> event of the Map, which occurs after the map is panned or zoomed.</p>
  
  <hr>
  
  <p>Here's my current strategy:</p>
  
  <ol>
  <li>Add event listener to <code>idle</code> event.</li>
  <li>When <code>idle</code> event is thrown, use jQuery to make a AJAX <code>HTTP POST</code> call to my backend, supplying the current viewport/bounds of the map.</li>
  <li>The backend returns all the points inside the viewport.</li>
  <li>The points are created into markers and added to Fluster2, which adds them to the map. Old points are NOT discarded.</li>
  <li>Repeat</li>
  </ol>
  
  <hr>
  
  <p>However, this can create issues, as the old points aren't discarded. I don't want to discard them, as I don't want to load them again, but with my current strategy, I would be loading them a second time and creating markers for them a second time.</p>
  
  <p>While I think it's not a good idea to somehow tell the backend in the AJAX call that I already have some of the markers, it'd be nice to <strong>implement some sort of a hashtable that doesn't allow duplicates</strong>.</p>
  
  <p>That way, when I load the points, I can try adding them to the hashtable first: if that succeeds, I haven't displayed them yet, so I can add them as markers; if it fails, they're already on the map.</p>
  
  <hr>
  
  <p><strong>Is this a good strategy?</strong> If so, how can I implement a hashtable that doesn't allow duplicates?</p>