Вывожу на карту google большое количество маркеров >2000 с помощью MarkerWithLabel.js, для удобства отображения используется кластеризация markerclusterplus.js Надеялась что с кластеризацией будут меньшие тормоза, так как не будут на карту выводиться сразу тысяч маркеров.
Но оказалось, что перед тем как объединиться в кластеры маркеры выводятся на карту.
Можно данное поведение как-то оптимизировать, и выводить сразу кластеры?
Ниже приведен код который выводит кластеры:
function setMarkers(map, locations) { //function to set markers and balloons
console.log(locations);
var listShopsResult='',
lenghtLocations = locations.length;
if (lenghtLocations > 1) {
for (var i = 0; i < lenghtLocations; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var brand = location[7];
var store = location[3];
var image = { // marker icon options
//url: location[3],
url: '<?php echo $cp_sale_config['default_marker_url'];?>',
size: new google.maps.Size(location[11][0],location[11][1]),
// The origin for this image is 0,0.
origin: new google.maps.Point(<?php echo $cp_sale_config['default_marker_origin'];?>),
// origin: new google.maps.Point(0 , origin),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(<?php echo $cp_sale_config['default_marker_anchor'];?>)
};
var address = location[0];
var image_url = location[8];
var phone_1 = location[4];
var phone_2 = location [9];
var note = location[5];
var product_line = location [6];
var labelClass = "labels store_"+store;
var countShops = i+1+'';
if(location[10]==0) {countShops = ''}
var contentString = '<img src="' + image_url + '">'; //balloon content
if (note != false) {
contentString = contentString + '<div><b>' + note + '</b></div>';
}
if (brand != null) {
contentString = contentString + '<div>' + brand + '</div>';
}
contentString = contentString + '<div>' + address + '</div>';
if (product_line != null) {
contentString = contentString + '<div>Product line: ' + product_line + '</div>';
}
if (phone_1 != false) {
contentString = contentString + '<div>Phone: ' + phone_1 + '</div>';
}
if (phone_2 != false) {
contentString = contentString + '<div>Phone: ' + phone_2 + '</div>';
}
var infowindow = new google.maps.InfoWindow({ //balloon options
content: contentString,
maxWidth: <?php echo $cp_sale_config['default_balloon_width'];?> //balloon max width set
});
var marker = new MarkerWithLabel({
position: myLatLng,
optimized: false,
map: map,
labelContent: countShops,
icon: image,
title: location[0],
labelAnchor: new google.maps.Point(<?php echo $cp_sale_config ['default_marker_anchor']?>),
labelClass: labelClass // the CSS class for the label
});
function infoCallback(infowindow, marker) { //function to prevent Closures (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3a_A_common_mistake)
return function () {
infowindow.open(map, marker);
};
}
infowindow.setContent(contentString); //set balloon content
google.maps.event.addListener(marker, 'click', infoCallback(infowindow, marker)); //show balloon on click marker
markersOrign.push(marker);
//Print list shops
var listShops='',
listShopsDescription='',
dist_mi = location[10].toFixed(2);
if (note != false) {
listShopsDescription = listShopsDescription + '<div><b>' + note + '</b></div>';
}
if (brand != null) {
listShopsDescription = listShopsDescription + '<div><strong>' + brand + '</strong></div>';
}
listShopsDescription = listShopsDescription + '<div>' + address + '</div>';
if (product_line != null) {
listShopsDescription = listShopsDescription + '<div>Product line: ' + product_line + '</div>';
}
if (phone_1 != false) {
contentString = contentString + '<div>Phone: ' + phone_1 + '</div>';
}
if (phone_2 != false) {
listShopsDescription = listShopsDescription + '<div>Phone: ' + phone_2 + '</div>';
}
listShops = '<div class="row"><div class="col-md-3 col-sm-4 col-xs-4"><div class="col-md-5 col-sm-6 col-xs-12"><span class="'+labelClass+'">' + countShops +'</span></div>';
listShops += '<div class="col-md-7 col-sm-6 col-xs-12">'+dist_mi+' mi</div></div>';
listShops += '<div class="col-md-8 col-sm-8 col-xs-8">'+listShopsDescription+'</div></div>';
listShopsResult += listShops;
if(dist_mi!=0.00){listShopsResult += listShops;}
if(i==lenghtLocations-1){jQuery('#list-shop').append(listShopsResult)}
}
var markerCluster = new MarkerClusterer(map, markersOrign,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
var paging = new pagingStores();
paging.showPage(1);
paging.printPagin();
}
}