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>