Google MarkerClusterer: decluster markers below a certain zoom level?
17
I'm using Google MarkerClusterer. I'd like to decluster all the markers whenever the map goes above zoom level 15.
There is a maxZoom setting in the configuration options, but the documentation does not make it clear what it is supposed to do.
I have tried setting it as follows, but the map remains clustered whatever zoom level I set the map to:
new_mc = new MarkerClusterer(map, newco_markers, {
maxZoom: 9
});
Am I doing something wrong, have I misunderstood what the option is supposed to do, or is there another way to fix this?
google-maps google-maps-api-3 markerclusterer
asked Mar 7 '13 at 16:47
RichardRichard
19.4k63199352
add a comment |
17
I'm using Google MarkerClusterer. I'd like to decluster all the markers whenever the map goes above zoom level 15.
There is a maxZoom setting in the configuration options, but the documentation does not make it clear what it is supposed to do.
I have tried setting it as follows, but the map remains clustered whatever zoom level I set the map to:
new_mc = new MarkerClusterer(map, newco_markers, {
maxZoom: 9
});
Am I doing something wrong, have I misunderstood what the option is supposed to do, or is there another way to fix this?
google-maps google-maps-api-3 markerclusterer
asked Mar 7 '13 at 16:47
RichardRichard
19.4k63199352
add a comment |
17
17
17
4
I'm using Google MarkerClusterer. I'd like to decluster all the markers whenever the map goes above zoom level 15.
There is a maxZoom setting in the configuration options, but the documentation does not make it clear what it is supposed to do.
I have tried setting it as follows, but the map remains clustered whatever zoom level I set the map to:
new_mc = new MarkerClusterer(map, newco_markers, {
maxZoom: 9
});
Am I doing something wrong, have I misunderstood what the option is supposed to do, or is there another way to fix this?
google-maps google-maps-api-3 markerclusterer
asked Mar 7 '13 at 16:47
RichardRichard
19.4k63199352
I'm using Google MarkerClusterer. I'd like to decluster all the markers whenever the map goes above zoom level 15.
There is a maxZoom setting in the configuration options, but the documentation does not make it clear what it is supposed to do.
I have tried setting it as follows, but the map remains clustered whatever zoom level I set the map to:
new_mc = new MarkerClusterer(map, newco_markers, {
maxZoom: 9
});
Am I doing something wrong, have I misunderstood what the option is supposed to do, or is there another way to fix this?
google-maps google-maps-api-3 markerclusterer
google-maps google-maps-api-3 markerclusterer
asked Mar 7 '13 at 16:47
RichardRichard
19.4k63199352
asked Mar 7 '13 at 16:47
RichardRichard
19.4k63199352
asked Mar 7 '13 at 16:47
RichardRichard
19.4k63199352
asked Mar 7 '13 at 16:47
RichardRichard
19.4k63199352
asked Mar 7 '13 at 16:47
RichardRichard
19.4k63199352
19.4k63199352
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
15
Setting the maxZoom level on this example, declusters all the markers for zoom level 8 and above.
To reproduce:
- set Max zoom level to 7
- click refresh map
- change the zoom level to 0 (the furthest out)
- click the "+" on the zoom slider 8 times.
The documentation for MarkerClustererPlus is a little clearer:
maxZoom | number | The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels. The default value is null.
code snippet:
var styles = [
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/pin.png',
height: 48,
width: 30,
anchor: [-18, 0],
textColor: '#ffffff',
textSize: 10,
iconAnchor: [15, 48]
}]
];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = ;
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom === -1 ? null : zoom;
size = size === -1 ? null : size;
style = style === -1 ? null : style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style],
imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m'
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}
#map {
width: 800px;
height: 400px;
}
#actions {
list-style: none;
padding: 0;
}
#inline-actions {
padding-top: 10px;
}
.item {
margin-left: 20px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<h3>An example of MarkerClusterer v3</h3>
<div id="map-container">
<div id="map"></div>
</div>
<div id="inline-actions">
<span>Max zoom level:
<select id="zoom">
<option value="-1">Default</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</span>
<span class="item">Cluster size:
<select id="size">
<option value="-1">Default</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="70">70</option>
<option value="80">80</option>
</select>
</span>
<span class="item">Cluster style:
<select id="style">
<option value="-1">Default</option>
<option value="0">People</option>
<option value="1">Conversation</option>
<option value="2">Heart</option>
<option value="3">Pin</option>
</select>
<input id="refresh" type="button" value="Refresh Map" class="item"/>
<a href="#" id="clear">Clear</a>
</div>answered Mar 7 '13 at 17:05
geocodezipgeocodezip
127k10146175
add a comment |
8
var markerClusterer = new MarkerClusterer(map, myMarkers, {
maxZoom: 15,
zoomOnClick: false
});
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup
//markerCluster goes away after zoom
//turn off zoom on click or spiderfy won't work
answered Aug 9 '15 at 12:44
onlymybestonlymybest
13915
add a comment |
0
You can always wrire different code, for example combine
- map.getZoom(),
- marker[i].setVisible(true) (or false) and
- google.maps.event.addListener(map, 'zoom_changed', ...
Something like this:
function show_hide_markers(zoom) {
var markerVisible;
for (var i = 0; i < markers.length; i++) {
if (zoom <= zoomRanges[i][1] && zoom >= zoomRanges[i][0] ) {
markerVisible = true
} else markerVisible = false;
if (markers[i].getVisible() != markersVisible) {
markers[i].setVisible(markersVisible);}
}
}
// ...
google.maps.event.addListener(map, 'zoom_changed', function () {
show_hide_markers(map.getZoom());
});
Create markers array first. Zoom level ranges can be kept in a separate array corresponding somehow to indexes in markers array (zoomRanges here). Zoom levels can be taken also from the original array (list) used to create the markers array.
In this example zoom range is assigned to each marker individually, but two dimensional arrays can be used and markerVisible obtained for entire clusters.
If markers number is not extremely high it should be sufficient. Probably adding / removing culd be applied instead of setting visibility.
Unlike marker manager (at least recently in some cases) this works even under API3 + API key applied. I was forced to do this yesterday / today.
answered May 12 '16 at 23:42
darekkdarekk
61111
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f15276908%2fgoogle-markerclusterer-decluster-markers-below-a-certain-zoom-level%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
15
Setting the maxZoom level on this example, declusters all the markers for zoom level 8 and above.
To reproduce:
- set Max zoom level to 7
- click refresh map
- change the zoom level to 0 (the furthest out)
- click the "+" on the zoom slider 8 times.
The documentation for MarkerClustererPlus is a little clearer:
maxZoom | number | The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels. The default value is null.
code snippet:
var styles = [
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/pin.png',
height: 48,
width: 30,
anchor: [-18, 0],
textColor: '#ffffff',
textSize: 10,
iconAnchor: [15, 48]
}]
];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = ;
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom === -1 ? null : zoom;
size = size === -1 ? null : size;
style = style === -1 ? null : style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style],
imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m'
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}
#map {
width: 800px;
height: 400px;
}
#actions {
list-style: none;
padding: 0;
}
#inline-actions {
padding-top: 10px;
}
.item {
margin-left: 20px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<h3>An example of MarkerClusterer v3</h3>
<div id="map-container">
<div id="map"></div>
</div>
<div id="inline-actions">
<span>Max zoom level:
<select id="zoom">
<option value="-1">Default</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</span>
<span class="item">Cluster size:
<select id="size">
<option value="-1">Default</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="70">70</option>
<option value="80">80</option>
</select>
</span>
<span class="item">Cluster style:
<select id="style">
<option value="-1">Default</option>
<option value="0">People</option>
<option value="1">Conversation</option>
<option value="2">Heart</option>
<option value="3">Pin</option>
</select>
<input id="refresh" type="button" value="Refresh Map" class="item"/>
<a href="#" id="clear">Clear</a>
</div>answered Mar 7 '13 at 17:05
geocodezipgeocodezip
127k10146175
add a comment |
15
Setting the maxZoom level on this example, declusters all the markers for zoom level 8 and above.
To reproduce:
- set Max zoom level to 7
- click refresh map
- change the zoom level to 0 (the furthest out)
- click the "+" on the zoom slider 8 times.
The documentation for MarkerClustererPlus is a little clearer:
maxZoom | number | The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels. The default value is null.
code snippet:
var styles = [
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/pin.png',
height: 48,
width: 30,
anchor: [-18, 0],
textColor: '#ffffff',
textSize: 10,
iconAnchor: [15, 48]
}]
];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = ;
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom === -1 ? null : zoom;
size = size === -1 ? null : size;
style = style === -1 ? null : style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style],
imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m'
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}
#map {
width: 800px;
height: 400px;
}
#actions {
list-style: none;
padding: 0;
}
#inline-actions {
padding-top: 10px;
}
.item {
margin-left: 20px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<h3>An example of MarkerClusterer v3</h3>
<div id="map-container">
<div id="map"></div>
</div>
<div id="inline-actions">
<span>Max zoom level:
<select id="zoom">
<option value="-1">Default</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</span>
<span class="item">Cluster size:
<select id="size">
<option value="-1">Default</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="70">70</option>
<option value="80">80</option>
</select>
</span>
<span class="item">Cluster style:
<select id="style">
<option value="-1">Default</option>
<option value="0">People</option>
<option value="1">Conversation</option>
<option value="2">Heart</option>
<option value="3">Pin</option>
</select>
<input id="refresh" type="button" value="Refresh Map" class="item"/>
<a href="#" id="clear">Clear</a>
</div>answered Mar 7 '13 at 17:05
geocodezipgeocodezip
127k10146175
add a comment |
15
15
15
Setting the maxZoom level on this example, declusters all the markers for zoom level 8 and above.
To reproduce:
- set Max zoom level to 7
- click refresh map
- change the zoom level to 0 (the furthest out)
- click the "+" on the zoom slider 8 times.
The documentation for MarkerClustererPlus is a little clearer:
maxZoom | number | The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels. The default value is null.
code snippet:
var styles = [
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/pin.png',
height: 48,
width: 30,
anchor: [-18, 0],
textColor: '#ffffff',
textSize: 10,
iconAnchor: [15, 48]
}]
];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = ;
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom === -1 ? null : zoom;
size = size === -1 ? null : size;
style = style === -1 ? null : style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style],
imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m'
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}
#map {
width: 800px;
height: 400px;
}
#actions {
list-style: none;
padding: 0;
}
#inline-actions {
padding-top: 10px;
}
.item {
margin-left: 20px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<h3>An example of MarkerClusterer v3</h3>
<div id="map-container">
<div id="map"></div>
</div>
<div id="inline-actions">
<span>Max zoom level:
<select id="zoom">
<option value="-1">Default</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</span>
<span class="item">Cluster size:
<select id="size">
<option value="-1">Default</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="70">70</option>
<option value="80">80</option>
</select>
</span>
<span class="item">Cluster style:
<select id="style">
<option value="-1">Default</option>
<option value="0">People</option>
<option value="1">Conversation</option>
<option value="2">Heart</option>
<option value="3">Pin</option>
</select>
<input id="refresh" type="button" value="Refresh Map" class="item"/>
<a href="#" id="clear">Clear</a>
</div>answered Mar 7 '13 at 17:05
geocodezipgeocodezip
127k10146175
Setting the maxZoom level on this example, declusters all the markers for zoom level 8 and above.
To reproduce:
- set Max zoom level to 7
- click refresh map
- change the zoom level to 0 (the furthest out)
- click the "+" on the zoom slider 8 times.
The documentation for MarkerClustererPlus is a little clearer:
maxZoom | number | The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels. The default value is null.
code snippet:
var styles = [
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/pin.png',
height: 48,
width: 30,
anchor: [-18, 0],
textColor: '#ffffff',
textSize: 10,
iconAnchor: [15, 48]
}]
];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = ;
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom === -1 ? null : zoom;
size = size === -1 ? null : size;
style = style === -1 ? null : style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style],
imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m'
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}
#map {
width: 800px;
height: 400px;
}
#actions {
list-style: none;
padding: 0;
}
#inline-actions {
padding-top: 10px;
}
.item {
margin-left: 20px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<h3>An example of MarkerClusterer v3</h3>
<div id="map-container">
<div id="map"></div>
</div>
<div id="inline-actions">
<span>Max zoom level:
<select id="zoom">
<option value="-1">Default</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</span>
<span class="item">Cluster size:
<select id="size">
<option value="-1">Default</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="70">70</option>
<option value="80">80</option>
</select>
</span>
<span class="item">Cluster style:
<select id="style">
<option value="-1">Default</option>
<option value="0">People</option>
<option value="1">Conversation</option>
<option value="2">Heart</option>
<option value="3">Pin</option>
</select>
<input id="refresh" type="button" value="Refresh Map" class="item"/>
<a href="#" id="clear">Clear</a>
</div>var styles = [
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/pin.png',
height: 48,
width: 30,
anchor: [-18, 0],
textColor: '#ffffff',
textSize: 10,
iconAnchor: [15, 48]
}]
];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = ;
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom === -1 ? null : zoom;
size = size === -1 ? null : size;
style = style === -1 ? null : style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style],
imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m'
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}
#map {
width: 800px;
height: 400px;
}
#actions {
list-style: none;
padding: 0;
}
#inline-actions {
padding-top: 10px;
}
.item {
margin-left: 20px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<h3>An example of MarkerClusterer v3</h3>
<div id="map-container">
<div id="map"></div>
</div>
<div id="inline-actions">
<span>Max zoom level:
<select id="zoom">
<option value="-1">Default</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</span>
<span class="item">Cluster size:
<select id="size">
<option value="-1">Default</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="70">70</option>
<option value="80">80</option>
</select>
</span>
<span class="item">Cluster style:
<select id="style">
<option value="-1">Default</option>
<option value="0">People</option>
<option value="1">Conversation</option>
<option value="2">Heart</option>
<option value="3">Pin</option>
</select>
<input id="refresh" type="button" value="Refresh Map" class="item"/>
<a href="#" id="clear">Clear</a>
</div>var styles = [
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}],
[{
url: 'https://googlemaps.github.io/js-marker-clusterer/images/pin.png',
height: 48,
width: 30,
anchor: [-18, 0],
textColor: '#ffffff',
textSize: 10,
iconAnchor: [15, 48]
}]
];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = ;
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom === -1 ? null : zoom;
size = size === -1 ? null : size;
style = style === -1 ? null : style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style],
imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m'
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}
#map {
width: 800px;
height: 400px;
}
#actions {
list-style: none;
padding: 0;
}
#inline-actions {
padding-top: 10px;
}
.item {
margin-left: 20px;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<h3>An example of MarkerClusterer v3</h3>
<div id="map-container">
<div id="map"></div>
</div>
<div id="inline-actions">
<span>Max zoom level:
<select id="zoom">
<option value="-1">Default</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</span>
<span class="item">Cluster size:
<select id="size">
<option value="-1">Default</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="70">70</option>
<option value="80">80</option>
</select>
</span>
<span class="item">Cluster style:
<select id="style">
<option value="-1">Default</option>
<option value="0">People</option>
<option value="1">Conversation</option>
<option value="2">Heart</option>
<option value="3">Pin</option>
</select>
<input id="refresh" type="button" value="Refresh Map" class="item"/>
<a href="#" id="clear">Clear</a>
</div>answered Mar 7 '13 at 17:05
geocodezipgeocodezip
127k10146175
edited Nov 24 '18 at 19:18
answered Mar 7 '13 at 17:05
geocodezipgeocodezip
127k10146175
answered Mar 7 '13 at 17:05
geocodezipgeocodezip
127k10146175
answered Mar 7 '13 at 17:05
geocodezipgeocodezip
127k10146175
127k10146175
add a comment |
add a comment |
8
var markerClusterer = new MarkerClusterer(map, myMarkers, {
maxZoom: 15,
zoomOnClick: false
});
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup
//markerCluster goes away after zoom
//turn off zoom on click or spiderfy won't work
answered Aug 9 '15 at 12:44
onlymybestonlymybest
13915
add a comment |
8
var markerClusterer = new MarkerClusterer(map, myMarkers, {
maxZoom: 15,
zoomOnClick: false
});
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup
//markerCluster goes away after zoom
//turn off zoom on click or spiderfy won't work
answered Aug 9 '15 at 12:44
onlymybestonlymybest
13915
add a comment |
8
8
8
var markerClusterer = new MarkerClusterer(map, myMarkers, {
maxZoom: 15,
zoomOnClick: false
});
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup
//markerCluster goes away after zoom
//turn off zoom on click or spiderfy won't work
answered Aug 9 '15 at 12:44
onlymybestonlymybest
13915
var markerClusterer = new MarkerClusterer(map, myMarkers, {
maxZoom: 15,
zoomOnClick: false
});
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup
//markerCluster goes away after zoom
//turn off zoom on click or spiderfy won't work
answered Aug 9 '15 at 12:44
onlymybestonlymybest
13915
answered Aug 9 '15 at 12:44
onlymybestonlymybest
13915
answered Aug 9 '15 at 12:44
onlymybestonlymybest
13915
answered Aug 9 '15 at 12:44
onlymybestonlymybest
13915
13915
add a comment |
add a comment |
0
You can always wrire different code, for example combine
- map.getZoom(),
- marker[i].setVisible(true) (or false) and
- google.maps.event.addListener(map, 'zoom_changed', ...
Something like this:
function show_hide_markers(zoom) {
var markerVisible;
for (var i = 0; i < markers.length; i++) {
if (zoom <= zoomRanges[i][1] && zoom >= zoomRanges[i][0] ) {
markerVisible = true
} else markerVisible = false;
if (markers[i].getVisible() != markersVisible) {
markers[i].setVisible(markersVisible);}
}
}
// ...
google.maps.event.addListener(map, 'zoom_changed', function () {
show_hide_markers(map.getZoom());
});
Create markers array first. Zoom level ranges can be kept in a separate array corresponding somehow to indexes in markers array (zoomRanges here). Zoom levels can be taken also from the original array (list) used to create the markers array.
In this example zoom range is assigned to each marker individually, but two dimensional arrays can be used and markerVisible obtained for entire clusters.
If markers number is not extremely high it should be sufficient. Probably adding / removing culd be applied instead of setting visibility.
Unlike marker manager (at least recently in some cases) this works even under API3 + API key applied. I was forced to do this yesterday / today.
answered May 12 '16 at 23:42
darekkdarekk
61111
add a comment |
0
You can always wrire different code, for example combine
- map.getZoom(),
- marker[i].setVisible(true) (or false) and
- google.maps.event.addListener(map, 'zoom_changed', ...
Something like this:
function show_hide_markers(zoom) {
var markerVisible;
for (var i = 0; i < markers.length; i++) {
if (zoom <= zoomRanges[i][1] && zoom >= zoomRanges[i][0] ) {
markerVisible = true
} else markerVisible = false;
if (markers[i].getVisible() != markersVisible) {
markers[i].setVisible(markersVisible);}
}
}
// ...
google.maps.event.addListener(map, 'zoom_changed', function () {
show_hide_markers(map.getZoom());
});
Create markers array first. Zoom level ranges can be kept in a separate array corresponding somehow to indexes in markers array (zoomRanges here). Zoom levels can be taken also from the original array (list) used to create the markers array.
In this example zoom range is assigned to each marker individually, but two dimensional arrays can be used and markerVisible obtained for entire clusters.
If markers number is not extremely high it should be sufficient. Probably adding / removing culd be applied instead of setting visibility.
Unlike marker manager (at least recently in some cases) this works even under API3 + API key applied. I was forced to do this yesterday / today.
answered May 12 '16 at 23:42
darekkdarekk
61111
add a comment |
0
0
0
You can always wrire different code, for example combine
- map.getZoom(),
- marker[i].setVisible(true) (or false) and
- google.maps.event.addListener(map, 'zoom_changed', ...
Something like this:
function show_hide_markers(zoom) {
var markerVisible;
for (var i = 0; i < markers.length; i++) {
if (zoom <= zoomRanges[i][1] && zoom >= zoomRanges[i][0] ) {
markerVisible = true
} else markerVisible = false;
if (markers[i].getVisible() != markersVisible) {
markers[i].setVisible(markersVisible);}
}
}
// ...
google.maps.event.addListener(map, 'zoom_changed', function () {
show_hide_markers(map.getZoom());
});
Create markers array first. Zoom level ranges can be kept in a separate array corresponding somehow to indexes in markers array (zoomRanges here). Zoom levels can be taken also from the original array (list) used to create the markers array.
In this example zoom range is assigned to each marker individually, but two dimensional arrays can be used and markerVisible obtained for entire clusters.
If markers number is not extremely high it should be sufficient. Probably adding / removing culd be applied instead of setting visibility.
Unlike marker manager (at least recently in some cases) this works even under API3 + API key applied. I was forced to do this yesterday / today.
answered May 12 '16 at 23:42
darekkdarekk
61111
You can always wrire different code, for example combine
- map.getZoom(),
- marker[i].setVisible(true) (or false) and
- google.maps.event.addListener(map, 'zoom_changed', ...
Something like this:
function show_hide_markers(zoom) {
var markerVisible;
for (var i = 0; i < markers.length; i++) {
if (zoom <= zoomRanges[i][1] && zoom >= zoomRanges[i][0] ) {
markerVisible = true
} else markerVisible = false;
if (markers[i].getVisible() != markersVisible) {
markers[i].setVisible(markersVisible);}
}
}
// ...
google.maps.event.addListener(map, 'zoom_changed', function () {
show_hide_markers(map.getZoom());
});
Create markers array first. Zoom level ranges can be kept in a separate array corresponding somehow to indexes in markers array (zoomRanges here). Zoom levels can be taken also from the original array (list) used to create the markers array.
In this example zoom range is assigned to each marker individually, but two dimensional arrays can be used and markerVisible obtained for entire clusters.
If markers number is not extremely high it should be sufficient. Probably adding / removing culd be applied instead of setting visibility.
Unlike marker manager (at least recently in some cases) this works even under API3 + API key applied. I was forced to do this yesterday / today.
answered May 12 '16 at 23:42
darekkdarekk
61111
edited May 12 '16 at 23:48
answered May 12 '16 at 23:42
darekkdarekk
61111
answered May 12 '16 at 23:42
darekkdarekk
61111
answered May 12 '16 at 23:42
darekkdarekk
61111
61111
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f15276908%2fgoogle-markerclusterer-decluster-markers-below-a-certain-zoom-level%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
