Google Map Marker Clusters - google-maps

Question

i've been trying to implement a new feature on one of my Google maps (MarkerClusterer), but i am not quite there yet.
It is running OK, but not smoothly and it would be great if you would look through the code and give me any tips/advice.
I am running a test here: (Link removed)
Please let me know if you need anymore info.
Any help is appreciated :)

Answer 1

You seem to be doing an awful lot within the loop that creates your markers. For instance you should only need to do var markerCluster = new MarkerClusterer(...) after that loop, not within every iteration of it!
Ok, here I've simply moved that line out of your loop.
for (var i = 0; i < mapLocationsdata.businesses.length; i++) {
var businesses = mapLocationsdata.businesses[i];
var pos = new google.maps.LatLng(businesses.lat, businesses.lng);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: businesses.company,
icon: placemarker[businesses.placemaker],
clickable: true,
draggable:false,
animation: google.maps.Animation.DROP
});
markers.push(marker);
(function(i, marker){
var infobox = new google.maps.InfoWindow({
content:
//This creates the content inside the popup info window when clicked
'<div class="info"><div class="info1"><h4>'
+businesses.company+
'</h4></div><div class="infotel">'
+businesses.itemAdresse+businesses.itemPostBy+businesses.itemTlf+businesses.itemEmail+businesses.itemWeb+
'</div><div class="clearfix"></div></div>',
});
//This function opens the info box and toggles the icon bounce
marker.addListener('click', function() {
infobox.open(map, marker);
toggleBounce(map, marker);
});
//This function stops the bouncs on the icon once the infowindow is closed
infobox.addListener('closeclick', function() {
toggleBounce(map, marker);
});
// POSSIBLY THIS FUNCTION COULD BE MOVED OUT OF THE LOOP TOO
//This makes them bounce when clicked
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
})
//The marker loop generates all of the markers
// NO IDEA WHAT THE POINT OF THIS LINE IS:
(i, marker);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
var markerCluster = new MarkerClusterer(map, markers, {
gridSize: 60,
minimumClusterSize: 2,
calculator: function(markers, numStyles) {
if (markers.length >= 50) return {text: markers.length, index: 3}; // red
if (markers.length >= 5) return {text: markers.length, index: 2}; // yellow
return {text: markers.length, index: 0}; } // blue
});