Strategy for lazy-loading markers into a Google Maps Javascript API map

Question

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.

As I don't want the client to run into memory issues, I want to lazy-load the markers and apply them to Fluster2 to put them into clusters. I think the best way to lazy-load the markers is to add an event listener to the idle event of the Map, which occurs after the map is panned or zoomed.

---

Here's my current strategy:

1. Add event listener to idle event.
2. When idle event is thrown, use jQuery to make a AJAX HTTP POST call to my backend, supplying the current viewport/bounds of the map.
3. The backend returns all the points inside the viewport.
4. The points are created into markers and added to Fluster2, which adds them to the map. Old points are NOT discarded.
5. Repeat

---

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.

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 implement some sort of a hashtable that doesn't allow duplicates.

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.

---

Is this a good strategy? If so, how can I implement a hashtable that doesn't allow duplicates?

Thanks in advance.

Answer 1

Hi, I've recently implemented something quite similar; while I personally opted to remove all markers and completely refill the maps, I actually like your overall strategy and think it might also make the user experience more fluid, as the short flicker between removing all markers and adding the new ones disappears. So yea, I'd say it's a good strategy.

Idle is an interesting event; I've found that onZoom etc didn't work particularly well and settled for TileLoaded (or similar). Works fine for me but does seem a bit like a hack.

Concerning your hashtable question - there's two possible places where you could store such a map.

a) Server If you can keep track of which page you're sending coordinates to, you could keep a dotnet Hashtable of the markers in your session state. This might keep you from sending unnecessary coordinates to the client, but is more errorprone imo

b) Client This is probably what you want to go for anyway. Here, a normal Javascript associative array should be your friend.

var x = {"some key": "some value"};
document.write ("some key" in x); // True
document.write ("some other key" in x); // False

Unless you find a good way of mapping lat and lng into a single hashable value, you might have to keep an array of arrays:

var markers = {lat1: {lng11: 1, lng12: 1, lng13: 1}, lat2: ...}

and then check like

...
if (checklat in markers)
   if (checklng in markers[checklat])
       return True
return False

I just see that this is an older question. Well too late, maybe it still helps.