Paging through search results with markers on a map

Question

My search interface returns pages of results with each page of results in a separate div.

i.e.

<div id="page1">
result 1
result 2
result 3
result 4
result 5
</div>

<div id="page2">
result 6
result 7
result 8
result 9
result 10
</div>

etc.

I'm generating this dynamically using ASP.NET MVC. I'm paging using jquery to hide all these divs then show the new one using a javascript function. So I can jump to a page or go forward, backwards, etc.

So far, so good. Now each search result corresponds to a location and I want to put a marker on a Google map div on the same page for the results being shown. i.e. if there are 5 results per page, we see 5 markers at any time. When the users goes to the next page we change the markers to the new locations.

I'm familiar with the Google Maps API but am new to getting data into the page in such a way that I can plot the markers and/or show/hide the right ones.

Can someone point me in the right direction of how I might do this? I just don't know what kind of data object to use or how to fill it, since all the results are loaded at one time. i.e. there's no ajax call when the pages changes - i just show/hide some divs.

Thanks in advance!

Answer 1

I would use a MarkerManager class for the GMap-markers. This way you can fill it with the markers from the first page and when the user goes to the next page you just empty the MarkerManager and fill it with the new ones.