markerclusterer.js или группировка маркеров на Google картах

В данной записи я хочу рассказать о дополнении к Google Maps API, которое позволяет группировать близко расположенные друг к другу маркеры и тем самым повысить удобство использования Google карт. Давайте сразу визуализируем проблему и представим что перед вами стоить задача отобразить на карте все кафе города N. Их может быть 50, 300, 500. Понатыкав такое обилие маркеров на карту, она превратится из удобного навигационного компонента в нечто непонятное. Врядле пользователь сможет выбрать заинтересовавшее его местоположение, так как маркеры будут накладываться друг на друга, а при уменьшении зума вообще сольются в один. Было бы намного удобнее группировать близко расположенные объекты и отображать один маркер с информацией о их количестве в данной области. Причем такая группировка должна происходит автоматически при изменении зума.

Итак, ожидаемый результат можно посмотреть в этом демо.

markerclusterer.js  - библиотека, которая используется для группировки маркеров на Google картах. Она не нова, но при этом примеров ее использования в реальных продуктах не так уж и много. Код библиотеки прекрасно документирован и трудностей с ее пониманием и использованием возникать не должно. Ниже я опишу, как скрипт markerclusterer.js был использован для демо.

Как создавалось демо

Для демо примера я использовал Google Maps API 3-ей версии. Простейший HTML для отображения карты представлен ниже.

<body>
  <div id="map-canvas"></div>
  <script src="https://maps.googleapis.com/maps/api/js?sensor=true&language=ru"></script>
  <script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
  <script src="demo.js"></script>
</body>

Как можно заметить, на странице подключается скрипт для загрузки Google Maps API, скрипт markerclusterer.js и скрипт demo.js, о котором речь пойдет дальше. Я заведомо опускаю стили, так как они достаточно просты и не стоят того, чтобы о них говорить. Сразу перейдем к скрипту demo.js, который занимается отображением карты, заполнением ее маркерами и инициализацией библиотеки для группировки этих маркеров.

function MarkerClustererDemo() {
  var _this = this,
      mapLat = 53.900000,
      mapLng = 27.5666667,
      map = null,
      markers = [];
   
  _this.loadMap = function() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(mapLat, mapLng),
      zoom: 7
    });
  };
   
  _this.generateRandomLocations = function(limit) {
    var randomLocations = [];
    for (var i = 0; i < limit; i++) {
      var rndLat = Math.random() * (54.500 - 53.500) + 53.500,
          rndLng = Math.random() * (27.999 - 27.001) + 27.001;
      randomLocations.push(new google.maps.LatLng(rndLat, rndLng));
    }
    return randomLocations;
  };
   
  _this.fillUpWithMarkers = function(limit) {
    var randomLocations = _this.generateRandomLocations(limit);
    for (var i = 0; i < randomLocations.length; i++) {
      var marker = new google.maps.Marker({
        position: randomLocations[i]
      });
      marker.setMap(map);
      markers.push(marker);
    }
  };
   
  _this.initMarkersClusterer = function() {
    new MarkerClusterer(map, markers);
  }
}
 
var markerClustererDemo = new MarkerClustererDemo();
// Отображаем карту
markerClustererDemo.loadMap();
// Заполняем карту маркерами
markerClustererDemo.fillUpWithMarkers(300);
// Инициализируем библиотеку для группировки маркеров
markerClustererDemo.initMarkersClusterer();

Как видим, для инициализации библиотеки достаточно создать новый экземпляр класса MarkerClusterer, передав в конструктор карту map и маркеры для группировки markers. Третьим аргументом может быть передан объект с параметрами для конфигурирования группировки. Список этих параметров прекрасно описан в коде библиотеки markerclusterer.js .

Если у вас возникли вопросы или трудности при использовании библиотеки, прошу в комментарии.