Answer the question
In order to leave comments, you need to log in
How to not display markers on the map before clustering?
I am displaying a large number of markers > 2000 on the google map using MarkerWithLabel.js, for the convenience of displaying markerclusterplus.js clustering is used. I hoped that there would be less brakes with clustering, since thousands of markers would not be displayed on the map at once.
But it turned out that before being combined into clusters, markers are displayed on the map.
Is it possible to somehow optimize this behavior, and display clusters at once?
Below is the code that displays the clusters:
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();
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question