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>
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.com/
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.com/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:
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();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.