I've looked at the docs and can't figure it out. I'm sure I'm missing something stupid. No errors, but no clustering.
I tried to take the simple example from here and add it to the map I was already working on, with no success. If possible, I'd like to keep the meat of the map the same. I've also looked at several other questions here with no luck.
If anyone could help me out I would be very very grateful.
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 800px;
height: 500px;
background-color:#CCC;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend img {
vertical-align: middle;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var script = '<script type="text/javascript" src="markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(33.137551,-0.703125),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(map_canvas, map_options);
map.set('styles', [
{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ color: '#888888' },
{ weight: 1.0 }
]
}, {
featureType: 'landscape',
elementType: 'geometry.fill',
stylers: [
{ hue: '#008f11' },
{ gamma: 1.0 },
{ saturation: 0 },
{ lightness: -10 }
]
}, {
featureType: 'water',
elementType: 'geometry.fill',
stylers: [
{ hue: '#054d8fd' },
{ gamma: 1.0 },
{ saturation: 0 },
{ lightness: -10 }
]
}, {
featureType: 'poi',
elementType: 'geometry',
stylers: [
{ visibility: 'off' }
]
}
]);
var iconBase = 'http://i1318.photobucket.com/albums/t658/greatergoodorg/';
var icons = {
people: {
name: 'People',
icon: iconBase + 'people_zps26d13009.png',
shadow: iconBase + 'shadow-people_zps4b39eced.png'
},
pets: {
name: 'Pets',
icon: iconBase + 'pets_zps15f549f2.png',
shadow: iconBase + 'shadow-pets_zps361068aa.png'
},
planet: {
name: 'Planet',
icon: iconBase + 'planet_zps2a8572ce.png',
shadow: iconBase + 'shadow-planet_zps9912e26b.png',
}
};
var infowindow = new google.maps.InfoWindow({maxWidth:200});
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
shadow: {
url: icons[feature.type].shadow,
anchor: new google.maps.Point(21, 32)
},
animation: google.maps.Animation.DROP,
map: map
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(feature.data);
infowindow.open(map,marker);
map.setZoom(3);
map.setCenter(marker.getPosition());
});
/*...
google.maps.event.addListener(marker, "click", function () {
infowindow.open(map,marker);
});
...*/
/*...
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
...*/
}
var features = [
{
position: new google.maps.LatLng(32.249974,-110.922089),
type: 'planet',
data: '<strong>The Madrean Archipelago Biodiversity Assesment</strong><p>Sky Island Alliance is the foremost source on the area of southern Arizona/New Mexico and northern Sonora known as the Sky Islands. Their MABA project studies the area and the data is used to protect land, preserve migratory corridors for animals in the area, and repair damaged habitat. Funding for the project was cut this year, and GreaterGood.org picked up the slack to fund 2013.</p>'
},
{
position: new google.maps.LatLng(0.263671,37.705078),
type: 'planet',
data: '<strong>Protect Vital Wildlife Corridors in Kenya</strong><p>African Wildlife Foundation</p>'
},
{
position: new google.maps.LatLng(15.749963,100.854492),
type: 'planet',
data: '<strong>Protect and Feed Thailand\'\s Elephants</strong><p>Alexander Abraham Foundation for The Surin Project for The Elephant Nature Foundation</p>'
},
{
position: new google.maps.LatLng(-102.744484,43.274956),
type: 'pets',
data: '<strong>Pine Ridge Indian Reservation Dog Rescue</strong><p>We are working with Red Rover to save the lives of dogs on the Pine Ridge Indian Reservation. So far we have helped to rescue hundreds of dogs and we are are continuing to fund this effort to solve the overpopulation problem on the reservation.</p>'
},
{
position: new google.maps.LatLng(-105.267563,40.027614),
type: 'pets',
data: '<strong>Save the Prarie Dog</strong><p>We are working with the Prarie Dog coalition to relocation groups of prarie dogs who would be affected by land development. Jane Goodall has said that the prarie dog is important to the survival of at least 9 other species in America.</p>'
},
{
position: new google.maps.LatLng(45.198188,-92.53089),
type: 'pets',
data: '<strong>Home For Life</strong><p>We are working hard to help build a home for life for rescued animals who may not have a chance to get adopted.</p>'
},
{
position: new google.maps.LatLng(34.743305,-82.252922),
type: 'pets',
data: '<strong>Care for Rescued Rabbits</strong><p>Rabbits need help too. That\'\s why We\'\ve partnered with the Rabbit Sanctuary to feed these cute little guys.</p>'
},
{
position: new google.maps.LatLng(40.24645,-75.134511),
type: 'pets',
data: '<strong>Emergency Transport Rig</strong><p>Animal Lifeline and IFAW</p>'
},
{
position: new google.maps.LatLng(-3.760458,-73.267136),
type: 'pets',
data: '<strong>Funding for Flooded Animal Shelter</strong><p>Amazon CARES</p>'
},
{
position: new google.maps.LatLng(47.605758,-122.326927),
type: 'people',
data: '<strong>Operation Sandwich</strong><p>Hunger in America is a very real issue. GreaterGood employees are volunteering their time once a week at Northwest Harvest to make sandwiches for those in need in Seattle. GreaterGood.org is funding the sandwiches for a full year.</p>'
},
{
position: new google.maps.LatLng(-13.987376,27.46582),
type: 'people',
data: '<strong>Educate Children in Zambia Orphaned by AIDS</strong><p>\(\American Friends of\)\ Cecily\'\s Fund</p>'
},
{
position: new google.maps.LatLng(34.166044,-118.528533),
type: 'people',
data: '<strong>Provide Support for Families Dealing with Autism</strong><p>ACT! Today</p>'
},
{
position: new google.maps.LatLng(-3.743329,-73.250656),
type: 'people',
data: '<strong>Medical Care in the Peruvian Amazon</strong><p>Amazon Promise</p>'
},
{
position: new google.maps.LatLng(-4.236856,-73.22113),
type: 'people',
data: '<strong>Amazon River Flooding</strong><p>Angels of the Amazon</p>'
},
{
position: new google.maps.LatLng(40.950538,-73.710322),
type: 'people',
data: '<strong>Helping Families Dealing With Autism</strong><p>Autism Speaks</p>'
},
{
position: new google.maps.LatLng(16.727619,98.58427),
type: 'people',
data: '<strong>Promoting the Mental Health of Displaced Burmese Refugees</strong><p>Burma Border Projects</p>'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, features, mcOptions);
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(
document.getElementById('legend'));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="legend"><strong>Project Types</strong></div>
</body>
</html>
You aren't adding an array of google.maps.Marker objects to the MarkerClusterer.
add a global array to store the google.maps.Markers in:
var gmarkers=[];add the markers created by addMarker to that array:
function addMarker(feature) { var marker = new google.maps.Marker({ position: feature.position, icon: icons[feature.type].icon, shadow: { url: icons[feature.type].shadow, anchor: new google.maps.Point(21, 32) }, animation: google.maps.Animation.DROP, map: map }); gmarkers.push(marker); google.maps.event.addListener(marker, "click", function () { infowindow.setContent(feature.data); infowindow.open(map,marker); map.setZoom(3); map.setCenter(marker.getPosition()); }); }add that array of google.maps.Markers to the MarkerClusterer (rather than the "features" array of objects).
var mc = new MarkerClusterer(map, gmarkers, mcOptions);
来源：https://stackoverflow.com/questions/17286524/google-maps-v3-markerclusterer-not-clustering