Объявление и добавление маркеров

Итак, как всегда нам нужно подключить файлик кластерера — думаю, тут все знают что и как. Далее, нам нужно объявить объект кластерера и уже в него добавлять маркеры:

clusterer = new Clusterer(map); // объект кластерера
...
clusterer.AddMarker(marker, title); // добавляем маркер в кластере

Обратите внимание, что добавление маркеров происходит не на карту, а в кластерер. Собственно, вот так просто можно избавиться от тормозов карты с большим количеством маркеров. На этом можно было бы и закончить, но мне было мало и я захотел немного покапаться с кодом и поменять отображение сгруппированных маркеров.

Настройка работы

Для начала, у стандартного кластерера была какая-то странная реакция на клик по иконке сгруппированных точек — вместо того, чтобы дать приближение на этот участок карты, он выводил инфоокно со списком содержащихся маркеров. Согласитесь, это не всегда удобно. Поэтому я немного переписал этот объект, так что при клике на иконку кластерера совершалось приближение этой области карты.

// эта функция до этого отвечала за открытие окна при клике на иконку кластерера
Clusterer.PopUp = function ( cluster ) {
    var clusterer = cluster.clusterer;
    var showMarker = Math.round(cluster.markers.length / 2);
    var curZoom = map.getZoom() + 1;
    map.panTo(cluster.markers[showMarker].getPoint());
    map.setZoom(curZoom);
};

Мой вариант вы так же можете использовать.

Потом мне захотелось поменять иконку. Это можно сделать либо как написано на странице скрипта:

clusterer.SetIcon(icon)

либо поменять строчки в самом файле (создается как обычная иконка маркера):

Clusterer.defaultIcon = new GIcon();
Clusterer.defaultIcon.image = 'http://wifi4free.ru/files/images/hotarea.png';
Clusterer.defaultIcon.iconSize = new GSize( 40, 40 );
Clusterer.defaultIcon.iconAnchor = new GPoint( 20, 20 );
Clusterer.defaultIcon.infoWindowAnchor = new GPoint( 20, 20 )

Потом я еще повозился с цифрами для минимального количества маркеров в кластере и остальными настройками (они для каждого свои):

clusterer.SetMaxVisibleMarkers(n) // максимальное количество видимых маркеров
clusterer.SetMinMarkersPerCluster(n) // сколько минимум маркеров в кластерере
clusterer.SetMaxLinesPerInfoBox(n) // количество строчек в инфоокне кластерера (мне было не нужно)

В итоге я оптимизировал и ускорил работу карты, которую вы можете видеть на страницах нашей карты точек Wi-Fi.

В общем, в следующей статье я расскажу про инфоокна, которые позволят вам делать подсказки на ваш вкус. Если же у вас есть какие-то вопросы или пожелания по поводу статей о Google Maps API, пишите в комментариях.