Pagination in infowindow of clusters in gmap3 - google-maps

Question

How can i set pagination for google map cluster infowindow. Iam using gmap3.
$(this).gmap3(
{clear:"overlay"},
{
overlay:{
latLng: cluster.main.getPosition(),
options:{
content: eventlist,
offset: {
x:-46,
y:-73
}
}
}
});
iam having eventlist as
eventlist ='
<div class='infobubble infobulle drive'>
<div class='infobubble_wrap'>
<div class='infobubble_event_text'>
<div class='infobubble_event_names'>arts</div>
<div class='infobubble_date'>Feb 06</div>
<div class='infobubble_event_venue'>Bulldog</div>
</div>
<div class='infobubble_event_image'><img src=thumb.jpg></img></div>
<div class='clear'></div>
</div>
</div>
<div class='infobubble infobulle drive'>
<div class='infobubble_wrap'>
<div class='infobubble_event_text'>
<div class='infobubble_event_names'>Comedy</div>
<div class='infobubble_date'>Jun 13</div>
<div class='infobubble_event_venue'>Our Little Comedy Theater</div>
</div>
<div class='infobubble_event_image'><img src=eventdefault_thumb.jpg></img></div>
<div class='clear'></div>
</div>
</div>
';
How can i get my event 'arts' and 'comedy' in two pages of the infowindow of my gmap3.I am new to gmap3?

Answer 1

I solved it.I wrote a function to get the details of each marker individually and called the function to display the details in the infowindow.Initially i was set to zero.
function infowindowhtml(i)
{
context = global_context_menu;
var markernum = context.length;
var first = next = '';
if (i == 0) {
first = '';
} else {
var j = i - 1;
first = "<div class='prev_info' onclick='showinfodetails(" + j + ");'><<</div>";
}
if (i == (markernum - 1)) {
next = '';
} else {
var j = i + 1;
next = "<div class='next_info' onclick='showinfodetails(" + j + ");'>>></div>";
}
var pagination = '<div>' + first + '<div class="middle_section">' + (i + 1) + '</div>' + next + '</div>';
var datastring = context[i].data;
eventlist=" <div class='infobubble infobubble_cluster infobulle"+(datastring ? " drive" : "") + "'><div class='infobubble_wrap infobubble_wrap_cluster'><div class='infobubble_event_text'><div class='infobubble_event_names'>Comedy</div>" +"<div class='infobubble_date'>Jun 13</div>" +"<div class='infobubble_event_venue'>Our Little</div>" +"<div class='clear'></div>" + pagination + "</div></div>";
return eventlist;
}
in the function showinfodetails i wrote
function showinfodetails(i) {
eventlist = infowindowhtml(i);
$('.infobubble_content').html(eventlist);
}
so on each click on next j will get increased and for each click on prev j will get decreased.This will be passed to the showinfodetails function and the details of that marker will be displayed.
We get context from
mouseover: function(cluster, event, context) {
global_context_menu = context.data.markers;
}
global_context_menu globally declared.

Answer 2

It seems as if the infobubble constructor was treated differently than I remember. I'd do:
var arts_tab="
<div class='infobubble infobulle drive'>
<div class='infobubble_wrap'>
<div class='infobubble_event_text'>
<div class='infobubble_event_names'>arts</div>
<div class='infobubble_date'>Feb 06</div>
<div class='infobubble_event_venue'>Bulldog</div>
</div>
<div class='infobubble_event_image'>
<img src=thumb.jpg></img>
</div>
<div class='clear'></div>
</div>
</div>";
var comedy_tab="<div class='infobubble infobulle drive'>
<div class='infobubble_wrap'>
<div class='infobubble_event_text'>
<div class='infobubble_event_names'>Comedy</div>
<div class='infobubble_date'>Jun 13</div>
<div class='infobubble_event_venue'>Our Little Comedy Theater</div>
</div>
<div class='infobubble_event_image'>
<img src=eventdefault_thumb.jpg></img>
</div>
<div class='clear'></div>
</div>
</div>";
infoBubble = new InfoBubble({
maxWidth: 300
});
infoBubble.addTab('Arts', arts_tab);
infoBubble.addTab('Comedy', comedy_tab);
But if you're using gmaps's wrappers it might be called differently.