The clustering works but somehow it only takes place at the maximum zoom out(the largest view with all nations), the moment I zoom in by 1 value, the clustering icon changes back to markers. I try with all kinds of values on the maxZoom and gridSize clusterer options with no help. Can someone please kindly advice. Thanks.
<script language="javascript" type="text/javascript">
var markersArray = [];
var mc = null;
var markersArray = [];
var mc = null;
var map;
var mapOptions;
var geocoder;
var infoWindow;
var http_request = false;
var lat = 0;
var lng = 0;
var startingZoom = 7;
var lowestZoom = 1; // The lower the number, the more places can be seen on within the bounds.
var highestZoom = 8;
function mapLoad() {
geocoder = new google.maps.Geocoder();
infoWindow = new google.maps.InfoWindow();
mapOptions = {
zoomControl: true,
zoom: 2,
minZoom: lowestZoom,
maxzoom: highestZoom,
draggable: true,
scrollwheel: true,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
$(document).ready(function () {
var searchUrl;
var locations;
// Place the user's current location marker on the map
var Location = new google.maps.LatLng(1.340319, 103.743744);
var Location2 = new google.maps.LatLng(1.322347, 103.757881);
createMarker('1', Location, 'My Location', '', '', '', '/Images/home.png');
createMarker('1', Location2, 'My Location', '', '', '', '/Images/bb.png');
var bounds = new google.maps.LatLngBounds();
bounds.extend(gameLocation);
map.fitBounds(bounds);
});
// Create the marker with address information
function createMarker(actId, point, address1, address2, town, postcode, icon) {
var marker = new google.maps.Marker({
map: map,
icon: icon,
position: point,
title: address1,
animation: google.maps.Animation.DROP
});
marker.metadata = { id: actId };
markersArray.push(marker);
mc = new MarkerClusterer(map, markersArray);
return marker;
}
</script>
