Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Here is an example demonstrating the use of 'bounds_changed' in javascript.
It assumes your map id is 'key_1', that you have a page identifier class 'view-display-id-page'
and that 'show maplinks' is enabled in the view. Any markers that fall outside the viewport will be hidden in the list of links.
Edit 'mytheme_script' to whatever suits your needs.
(function ($) {
Drupal.behaviors.mytheme_script = {
attach: function () {
var k = 'key_1';
var page_id = 'view-display-id-page';
if ($('.' + page_id).is('div') && $("#getlocations_map_wrapper_" + k).is('div')) {
var map = Drupal.getlocations_map[k];
google.maps.event.addListener(map, 'bounds_changed', function() {
b = map.getBounds();
data = Drupal.getlocations_data[k];
latlons = data.latlons;
for (var i = 0; i < latlons.length; i++) {
var arr2 = latlons[i];
var lat = arr2[0];
var lon = arr2[1];
var lid = arr2[2];
var p = new google.maps.LatLng(lat, lon);
// is this point within the bounds?
if (b.contains(p)) {
$("li a.lid-" + lid).show();
}
else {
$("li a.lid-" + lid).hide();
}
}
});
}
} // end attach
}; // end behaviors
})(jQuery);