How to implement pagination in Google Maps InfoWindow for multiple locations?

Question

I have a google map with a muliplte location and several markers in the same place.

My card details will be like

[{"DisplayText": "Test Window 1 - 1", "LatitudeLongitude": "61.095,10.547", "Location": "Oslo"},
{"DisplayText": "Test Window 1 - 2", "LatitudeLongitude": "61.095,10.547", "Location": "Oslo"},
{"DisplayText": "Test Window 2 - 1", "LatitudeLongitude": "61.585,8.369", "Location": "Ringebu Municipality"},
{"DisplayText": "Test Window 2 - 2", "LatitudeLongitude": "61.585,8.369", "Location": "Ringebu Municipality"},
{"DisplayText": "Test Window 1 - 3", "LatitudeLongitude": "61.095,10.547", "Location": "Oslo"},
{"DisplayText": "Test Window 3 - 1", "LatitudeLongitude": "61.778,11.3609", "Location": "Oslo Municipality"},
{"DisplayText": "Test Window 4 - 1", "LatitudeLongitude": "63.485,10.449", "Location": "Trondheim"}]

I need to display data having the same lat long in the slider inside google infowindow.

It is displayed here . But I need to display multiple markers with pagination features FIDDLE

Answer 1

This can be done manually using the method setContenton InfoWindow .

- - , , : http://www.auctionsearchkit.co.uk/search.php?satitle=test&site=UK. , , « < > » ( eBay ). Javascript HTML , ( ) - :

function getInfoWindowHtml(pc) {
  var infoWindowHtml = '<span' + MOUSE_OVER_HAND 
                               + ' title="View the first item at this location"'
                               + ' onclick="viewFirstItem(\'' + pc + '\')">'
                     + '&laquo;</span>&nbsp;'
                     + '<span' + MOUSE_OVER_HAND 
                               + ' title="View the previous item at this location"'
                               + ' onclick="viewPrevItem(\'' + pc + '\')">'
                     + '&lt;</span>&nbsp;'
                     + '<span' + MOUSE_OVER_HAND
                               + ' title="View the next item at this location"'
                               + ' onclick="viewNextItem(\'' + pc + '\')">'
                     + '&gt;</span>&nbsp;'
                     + '<span' + MOUSE_OVER_HAND
                               + ' title="View the last item at this location"'
                               + ' onclick="viewLastItem(\'' + pc + '\')">'
                     + '&raquo;</span>&nbsp;&nbsp;' :
                       '')
                   + '...etc...';
  }

  return infoWindowHtml;
}

... , :

  // Open the Info Window
  var html = getInfoWindowHtml(pc);
  infoWindow.setContent(html);
  infoWindow.open(map, marker);

viewFirstItem, viewLastItem, viewNextItem viewPrevItem, HTML- infoWindow.

Answer 2

, , , :

, , . , , , 10 .

, infoWindow, , . .

, , infoWindow, , , . , .