Google Maps InfoWindow adding pagination for multiple markers

Question

Has anyone ever tried to add simple pagination to a Google Map InfoWindow? Sometimes I have multiple items at the same location, and currently my infoWindow displays all of them together separated by horizontal rules. I'd like to make it so if there are multiple markers at the location, the infowindow stays the same size, but has a Prev/Next button to allow the user to paginate through the available data.

Any thoughts? Is this even possible?

UPDATE

So far I've tried using the jquery jPages plugin like so:

google.maps.event.addListener(cbMapMarker[x], 'click', function(){              
     cbMapInfoWindow.setContent(infoWindowPaginate(cbMapInfoContent[x]));                           
     cbMapInfoWindow.open(cbMap,cbMapMarker[x]);
     $('#cboxLoadedContent iframe').contents().find('.infoWindowHolder').jPages({
          containerID : "infoWindowContainer"
     });                            
}); 


function infoWindowPaginate(infoWindowContent)
{
    // Define our opening and closing tags for the wrapping container
    var startWrap = '<div class="infoWindowHolder"></div><div id="infoWindowContainer">';
    var endWrap = '</div>';
    // Create a new variable containing the infoWindowContent wrapped with our tags
    var newContent = startWrap + infoWindowContent + endWrap;
    return newContent;  
}

The content passed to the infoWindowPaginate function would look something like this

<div><p>DATA 1 HERE</p></div><div><p>DATA 2 HERE</p></div>

So far I'm getting the <--prev and next--> text in my infoWindow, still working on it though. Any suggestions as to a better approach?

JDFIDDLE http://jsfiddle.net/GuB92/1/

Answer 1

I figured it out. I had to add a listener for the infoWindow's domready event and call my jPages from within there. Working perfectly now.

                    // Add event listener for the infoWindow 
                google.maps.event.addListener(cbMapInfoWindow, 'domready', function() {
                    $('#cboxLoadedContent iframe').contents().find('.infoWindowHolder').jPages({
                        containerID : "infoWindowContainer"
                    });
                });

JSFiddle

http://jsfiddle.net/GuB92/3/

Answer 2

You can make a custom paginator of Your own like slider. Load all information and show the first one and hide rest of all then keep your page number and next prev button do necessary task of click event. You can do it Like any other jQuery plugin.