CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3zooming
user3076049
user3076049

Reputation:

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>

Upvotes: 2

Views: 6451

Answers (6)

Tiaan Morkel
Tiaan Morkel

Reputation: 11

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>

Upvotes: 1

Austin Mueller
Austin Mueller

Reputation: 169

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();
        }
  });

Upvotes: 0

Taras
Taras

Reputation: 21

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/

Upvotes: 2

user3076049
user3076049

Reputation:

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.

Upvotes: 2

Deep 3015
Deep 3015

Reputation: 10075

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

Upvotes: 0

Mazz
Mazz

Reputation: 1879

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);
}

Upvotes: 1

Related Questions