Приветствую!
Есть такой код, в данном примере он выводит 4 маркера на карте
все работает исправно, но есть проблема если таких маркеров я добавлю много то будет смотреться
плохо.
Для этого мне нужна кластеризация этих маркеров, помогите примером кто сталкивался с этим
я в курсе что нужна библиотека
markerclusterer.js
и возможно
jquery.min.js
нужна такая кластерезация маркеров как тут
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2"></script>
<body onload="showMap();" onunload="GUnload()">
<script type="text/javascript">
function showMap()
{
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(41.881576,12.495232), 6);
var icon = new GIcon();
icon.image = "http://mapszoom.com/temp/map/img/location.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 6);
icon.infoWindowAnchor = new GPoint(1, 1);
function createMarker(point, description, icon) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(description, icon);
});
return marker;
}
map.addOverlay(createMarker(new GLatLng(41.888014,12.482378), "Описание 1 - маркера", icon));
function createMarker(point, description, icon) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(description, icon);
});
return marker;
}
map.addOverlay(createMarker(new GLatLng(41.89616,12.484159), "Описание 2 - маркера", icon));
function createMarker(point, description, icon) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(description, icon);
});
return marker;
}
map.addOverlay(createMarker(new GLatLng(41.893445,12.483258), "Описание 3 - маркера", icon));
function createMarker(point, description, icon) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(description, icon);
});
return marker;
}
map.addOverlay(createMarker(new GLatLng(41.911132,12.48741), "Описание 4 - маркера", icon));
}
}
</script>
<div id="map_canvas" style="width: 800px; height: 500px;"></div>