Google Maps API JS - MarkerClusterer - 无法读取未定义的属性“maxZoom”

Question

I have google map object with options:

$(document).ready(function () {
    var mapOptions = {
        zoom: 4,
        minZoom: 3,
        maxZoom: 12,
        center: new google.maps.LatLng(39.484973, -0.364126),
        mapTypeControl: false,
        streetViewControl: false
    };

    var mapElement = document.getElementById('#map');

    map = new google.maps.Map(mapElement, mapOptions);

    markers = [...];
    markerCluster = new MarkerClusterer(map, markers, {
        averageCenter: true,
        styles: [{
            url: '/cluster.png',
            width: 64,
            height: 64,
            textColor: 'white',
            backgroundPosition: 'center'
        }]
    });

    ...
}

Now after initializing a map I want to change a zoom level by running:

var location = ...

map.setCenter(location); // works fine
map.setZoom(7);`, 

but I get an error in console:

Uncaught TypeError: Cannot read property 'maxZoom' of undefined
at Ag.<anonymous> (markerclusterer.js:163)
at Object._.z.trigger (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:99)
at Hb (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:38)
at Ag._.k.set (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:101)
at Ag.setZoom (js?key=AIzaSyBpuEnTxOHtdmlMllM_Qd2SL_Q2t45o3_0:56)
at OfferMap.setBounds (offers_offer-map_1.js:1)
at HTMLDocument.<anonymous> (offers_trainee-offers_3.js:1)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)

Anyone has any ideas what is going on?

UPDATE

Since problem is because of MarkerClusterer as @geocodezip mentioned in comment below, here is the script I load in:

<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

Answer 1

Okay, I resolved it, Apparently, as @geocodezip mentioned under the question it was masterclusterer problem and my imported library was out of date. Had to download newer . Works perfectly.

Also do not forget to set maxZoom in MarkerClusterer options:

this.markerCluster = new MarkerClusterer(this.map, this.markers, {
    maxZoom: 12,
    averageCenter: true,
    styles: [{
        url: this.clusterIcon,
        width: 64,
        height: 64,
        textColor: 'white',
        backgroundPosition: 'center'
    }]
});

During clear problems, updated title and question for the future visitors.

Answer 2

For me issue was only solved after defining mapTypes collection for google map object: this.googleMapOptions = { zoom: 5, center: {lat: -28.643387, lng: 153.612224}, disableDefaultUI: true, styles: MapStyle.json, maxZoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, zoomControl: false }

Initialize Google map:

        this.gmap = new google.maps.Map(jqueryElement[0],
            this.googleMapOptions);

        this.googleMapType = new google.maps.MapTypeRegistry();

        this.roadMapType = new google.maps.StyledMapType(MapStyle.json, { alt: "roadmap", maxZoom: 18, name : "roadmap" })

        this.googleMapType.set("roadmap", this.roadMapType);

        this.gmap.mapTypes = this.googleMapType;
        this.gmap.setMapTypeId("roadmap");

MapStyle json object can be generated at https://mapstyle.withgoogle.com/

Answer 3

You should wrap this function in window.onload to make sure that the dom is loaded.

window.onload = function () {

    var mapOptions = {
        zoom: 4,
        minZoom: 3,
        maxZoom: 12,
        center: new google.maps.LatLng(39.484973, -0.364126),
        mapTypeControl: false,
        streetViewControl: false
    };

    var mapElement = document.getElementById('#map');

    map = new google.maps.Map(mapElement, mapOptions);
}

Answer 4

I had the same issue in Angular 8 project. Adding the following to my index.html file fix the issue for me:

<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

Answer 5

Try to set map globally and the call update function for updating zoom with map.setZoom(7);

Fiddle demo

JS

var map;
function initMap() {
var mapOptions = {
    zoom: 4,
    minZoom: 3,
    maxZoom: 12,
    center: new google.maps.LatLng(39.484973, -0.364126),
    mapTypeControl: false,
    streetViewControl: false
};

var mapElement = document.getElementById('map');

map = new google.maps.Map(mapElement, mapOptions);
}
function updateMap(){
map.setZoom(7);
}

HTML

<button onclick="updateMap()">
set zoom
</button>
<div id="map"></div>

Updated Fiddle:

Fiddle

Answer 6

Similarly to @Taras, I was able to solve this problem by tweaking the markerclusterer.js file slightly. Replace the 'zoom_changed' listener with the following...

// Add the map event listeners
  var that = this;
  google.maps.event.addListener(this.map_, 'zoom_changed', function() {
    // Determines map type and prevent illegal zoom levels
        var zoom = that.map_.getZoom();
        var minZoom = that.map_.minZoom || 0;
        var mapType = that.map_.mapTypes[that.map_.getMapTypeId()];
        var maxZoom = null;
        if (mapType !== null && mapType !== undefined) {
            maxZoom = Math.min(that.map_.maxZoom || 100, mapType.maxZoom);
        } else {
            maxZoom = that.map_.maxZoom || 100;
        }

        zoom = Math.min(Math.max(zoom,minZoom),maxZoom);

        if (that.prevZoom_ != zoom) {
            that.prevZoom_ = zoom;
            that.resetViewport();
        }
  });