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

Question

I have google map with muliplte location and multiple marker in same location.

My Map data will be like this

[{"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 which has same lat, long in a slider within Google infowindow.

There is a FIDDLE to display like that . But I need to display multiple markers with pagination features

"I need to display data which has same lat, long in a slider within Google infowindow", can you explain this a little more or can you give an example — Nidhin Chandran, Jul 05 '17 at 14:59

score 3 · Answer 1 · answered Jul 06 '17 at 12:50

This can be implemented manually, making use of the setContent method on the InfoWindow.

I did a similar thing years ago - to see a demo of it in action, load the following page and wait a while for the markers to come up: http://www.auctionsearchkit.co.uk/search.php?satitle=test&site=UK . Then click on a few markers until you come to one where the infowindow has « < > » icons at the top (this is where more than one of the eBay search results is for the same seller). You can check out the Javascript on the HTML page for more details but basically (with some bits cut out) you'll need something like this:

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;
}

...and code like the following to open it:

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

You'll then need to implement viewFirstItem, viewLastItem, viewNextItem and viewPrevItem functions to change the infoWindow's HTML appropriately.

score 1 · Answer 2 · answered Jun 30 '17 at 09:55

To give you a full working answer would really take some time and experimentation, so these are the steps I would do:

Find all the makers close to the one that has been clicked. In your case they are at the same location, so maybe a radius of 10m would work. Finding all the markers inside a given radius

Create an variable to contain the infoWindow content and add to it for each maker that falls within that location. Then display that location.

The other solution that could work would be to combine all of the infoWindow content you want for a set of markers in the first place, and then just add one maker to represent that group of markers. In some way adding multiple makers to the same location is counter intuitive, as only one will ever be clicked.

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

2 Answers2