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

IT技术

更新时间：2025-03-161

admin管理员组
文章数量:1323225

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 ment below, here is the script I load in:

<script type="text/javascript" src=".js"></script>

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 ment below, here is the script I load in:

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

Share Improve this question edited May 4, 2017 at 14:25 asked May 4, 2017 at 13:22 user3076049

1 Do you have a working fiddle? – Mazz Commented May 4, 2017 at 13:24
Project is too plicated to copy for fiddle, sorry :/ – user3076049 Commented May 4, 2017 at 13:25
Have you placed the js before or after the <body> tag? – Mazz Commented May 4, 2017 at 13:29
1 Please provide a minimal reproducible example that demonstrates the issue. The error is in MarkerClusterer, but no MarkerClusterer is present in the posted code. – geocodezip Commented May 4, 2017 at 13:50
@geocodezip updated a question with markercluster. Please take a look – user3076049 Commented May 4, 2017 at 13:57

Add a ment |

6 Answers 6

Sorted by: Reset to default 2

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.

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

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

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./maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

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

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

本文标签： javascriptGoogle Maps API JSMarkerClustererCannot read property 39maxZoom39 of undefinedStack Overflow

版权声明：本文标题：javascript - Google Maps API JS - MarkerClusterer - Cannot read property 'maxZoom' of undefined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742087730a2420082.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

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

6 Answers 6

更多相关文章