Google MarkerClusterer: decluster markers below a certain zoom level?

Question

I'm using Google MarkerClusterer. I'd like to decluster all the markers whenever the map goes above zoom level 15.

There is a maxZoom setting in the configuration options, but the documentation does not make it clear what it is supposed to do.

I have tried setting it as follows, but the map remains clustered whatever zoom level I set the map to:

    new_mc = new MarkerClusterer(map, newco_markers, {       maxZoom: 9     }); 

Am I doing something wrong, have I misunderstood what the option is supposed to do, or is there another way to fix this?

Answer 1

Setting the maxZoom level on this example, declusters all the markers for zoom level 8 and above.

(working version of example with valid key, original example in github is from before key was required)

To reproduce:

1. set Max zoom level to 7
2. click refresh map
3. change the zoom level to 0 (the furthest out)
4. click the "+" on the zoom slider 8 times.

The documentation for MarkerClustererPlus is a little clearer:

maxZoom | number | The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels. The default value is null.

code snippet:

var styles = [   [{     url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/people35.png',     height: 35,     width: 35,     anchor: [16, 0],     textColor: '#ff00ff',     textSize: 10   }, {     url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/people45.png',     height: 45,     width: 45,     anchor: [24, 0],     textColor: '#ff0000',     textSize: 11   }, {     url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/people55.png',     height: 55,     width: 55,     anchor: [32, 0],     textColor: '#ffffff',     textSize: 12   }],   [{     url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/conv30.png',     height: 27,     width: 30,     anchor: [3, 0],     textColor: '#ff00ff',     textSize: 10   }, {     url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/conv40.png',     height: 36,     width: 40,     anchor: [6, 0],     textColor: '#ff0000',     textSize: 11   }, {     url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/conv50.png',     width: 50,     height: 45,     anchor: [8, 0],     textSize: 12   }],   [{     url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/heart30.png',     height: 26,     width: 30,     anchor: [4, 0],     textColor: '#ff00ff',     textSize: 10   }, {     url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/heart40.png',     height: 35,     width: 40,     anchor: [8, 0],     textColor: '#ff0000',     textSize: 11   }, {     url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/heart50.png',     width: 50,     height: 44,     anchor: [12, 0],     textSize: 12   }],   [{     url: 'https://cdn.jsdelivr.net/npm/[email protected]/images/pin.png',     height: 48,     width: 30,     anchor: [-18, 0],     textColor: '#ffffff',     textSize: 10,     iconAnchor: [15, 48]   }] ];  var markerClusterer = null; var map = null; var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +   'chco=FFFFFF,008CFF,000000&ext=.png';  function refreshMap(data) {   if (markerClusterer) {     markerClusterer.clearMarkers();   }    var markers = [];    var markerImage = new google.maps.MarkerImage(imageUrl,     new google.maps.Size(24, 32));    for (var i = 0; i < data.photos.length; ++i) {     var latLng = new google.maps.LatLng(data.photos[i].latitude,       data.photos[i].longitude)     var marker = new google.maps.Marker({       position: latLng,       draggable: true,       icon: markerImage     });     markers.push(marker);   }    var zoom = parseInt(document.getElementById('zoom').value, 10);   var size = parseInt(document.getElementById('size').value, 10);   var style = parseInt(document.getElementById('style').value, 10);   zoom = zoom === -1 ? null : zoom;   size = size === -1 ? null : size;   style = style === -1 ? null : style;    markerClusterer = new MarkerClusterer(map, markers, {     maxZoom: zoom,     gridSize: size,     styles: styles[style],     imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'   }); }  function initialize() {   map = new google.maps.Map(document.getElementById('map'), {     zoom: 2,     center: new google.maps.LatLng(39.91, 116.38),     mapTypeId: google.maps.MapTypeId.ROADMAP   });    var refresh = document.getElementById('refresh');   google.maps.event.addDomListener(refresh, 'click', refreshMap);    var clear = document.getElementById('clear');   google.maps.event.addDomListener(clear, 'click', clearClusters);    $.getJSON("https://api.myjson.com/bins/6ad78", function(data, textStatus, jqXHR) {     console.log(textStatus);     refreshMap(data);   }); }  function clearClusters(e) {   e.preventDefault();   e.stopPropagation();   markerClusterer.clearMarkers(); }  google.maps.event.addDomListener(window, 'load', initialize);

body {   margin: 0;   padding: 10px 20px 20px;   font-family: Arial;   font-size: 16px; }  #map-container {   padding: 6px;   border-width: 1px;   border-style: solid;   border-color: #ccc #ccc #999 #ccc;   -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;   -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;   box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;   width: 800px; }  #map {   width: 800px;   height: 400px; }  #actions {   list-style: none;   padding: 0; }  #inline-actions {   padding-top: 10px; }  .item {   margin-left: 20px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <!-- scr -- ipt src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></scr -- ipt --> <script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script> <h3>An example of MarkerClusterer v3</h3> <div id="map-container">   <div id="map"></div> </div> <div id="inline-actions">   <span>Max zoom level:         <select id="zoom">           <option value="-1">Default</option>           <option value="7">7</option>           <option value="8">8</option>           <option value="9">9</option>           <option value="10">10</option>           <option value="11">11</option>           <option value="12">12</option>           <option value="13">13</option>           <option value="14">14</option>         </select>        </span>   <span class="item">Cluster size:         <select id="size">           <option value="-1">Default</option>           <option value="40">40</option>           <option value="50">50</option>           <option value="70">70</option>           <option value="80">80</option>         </select>       </span>   <span class="item">Cluster style:         <select id="style">           <option value="-1">Default</option>           <option value="0">People</option>           <option value="1">Conversation</option>           <option value="2">Heart</option>           <option value="3">Pin</option>        </select>        <input id="refresh" type="button" value="Refresh Map" class="item"/>        <a href="#" id="clear">Clear</a>     </div>