Search code examples
javascriptgoogle-mapsgoogle-maps-api-3zooming

Google Maps API JS - MarkerClusterer - Cannot read property 'maxZoom' of undefined


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>

Solution

  • 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.