jquery-ui-map (Google Maps) с "разбиением на страницы" или "боковой панелью навигации"
Я использую jquery-ui-map и мне очень нравится.
Демонстрационные файлы JQUERY-UI-MAP содержат образец "нумерации страниц", который "сам заполнится" на основе маркеров на карте. ( ОБРАЗЕЦ)
Я хотел бы иметь "предопределенную" нумерацию страниц по регионам (Европа, Африка, Северная Америка, Южная Америка и т. Д.)
У нас на карте около 3000 маркеров с кластерами и фильтрацией.
Разметка / навигация может быть "сверху карты" или на боковой панели.
Цель: посетитель нажимает на "ЕВРОПА", и карта центрируется на некоторых заданных координатах с заданным коэффициентом масштабирования. Мы добавим около 20 регионов - выборка для 2 или 3 "фиксированных" координат может быть очень полезной.
Вот как работает "авто" нумерация страниц:
( function($) {
$.extend($.ui.gmap.prototype, {
/**
* Page through the markers. Very simple version.
* @param prop:the marker property to show in display, defaults to title
*/
pagination: function(prop) {
var $el = $("<div id='pagination' class='pagination shadow gradient rounded clearfix'><div class='lt btn back-btn'></div><div class='lt display'></div><div class='rt btn fwd-btn'></div></div>");
var self = this, i = 0, prop = prop || 'title';
self.set('p_nav', function(a, b) {
if (a) {
i = i + b;
$el.find('.display').text(self.get('markers')[i][prop]);
self.get('map').panTo(self.get('markers')[i].getPosition());
}
});
self.get('p_nav')(true, 0);
$el.find('.back-btn').click(function() {
self.get('p_nav')((i > 0), -1, this);
});
$el.find('.fwd-btn').click(function() {
self.get('p_nav')((i < self.get('MarkerClusterer').length - 1), 1, this);
});
self.addControl($el, google.maps.ControlPosition.TOP_LEFT);
}
});
} (jQuery) );
благодарю вас