I'm currently working with a googlemaps (version 3) on a new site we're constructing and we're looking at attempting to implement the MarkerClusterer feature.
I've dug through the google documentation as well as a multitude of stackoverflow and independent blog posts about how to implement the MarkerClusterer however I'm still not understanding how to implement it properly.
Javascript (simplified)
Code:
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.tools.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=false" type="text/javascript"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="type/javascript"></script>
<script type="text/javascript">
var locations = [
['Corporate 3 DesignThis is where I work. i work with great people.', 41.249412, -96.03073, 1],
['This is simply a testThis is the info', 41.252615, -96.1338, 2]
];
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(41.22,-95.95),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
Yes the map is working, yes the points are working, yes the infobubbles are pulling through. However I'm getting the error of "MapClusterer is undefined" despite having called the MarkerClusterer.js file which explicitly creates the function named "MarkerClusterer".
any help on this would rock and I'm sure if anyone else has this problem it'd be a relief to find a solution
Sorry about that, I have updated the markerCluster in this version. There was a submission right before I copied the snippet of code and did not realize that it didn't include the MarkerClusterer.
Still the same errors are coming through, MarkerClusterer is undefined despite the fact that the js is included and defines the markerclusterer
Quote:
Originally Posted by xelawho
I don't get that error with the code provided, but then I don't see any attempt to use the marker clusterer in the code you have posted either.
I think you might need to post some code that is not quite so simplified, or maybe a link to your actual map
Code:
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.tools.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=false" type="text/javascript"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="type/javascript"></script>
<script type="text/javascript">
var locations = [
['Corporate 3 DesignThis is where I work. i work with great people.', 41.249412, -96.03073, 1],
['This is simply a testThis is the info', 41.252615, -96.1338, 2]
];
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(41.22,-95.95),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
var markerCluster = new MarkerClusterer(map, markers);
}
</script>
Here is the updated snippet with the marker clusterer is defined with the error coming through properly
The next thing is that the second argument of the markerclusterer is supposed to be an array of markers, but you are passing it a variable "markers" which you have not defined. what you would want to do is create an empty array, push your markers onto it, then pass that array (outside of the marker creation loop) to the clusterer. Something like this, I am guessing:
Code:
<script type="text/javascript">
var markers=[];
var locations = [
['Corporate 3 DesignThis is where I work. i work with great people.', 41.249412, -96.03073, 1],
['This is simply a testThis is the info', 41.252615, -96.1338, 2]
];
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(41.22,-95.95),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker)
}
var markerCluster = new MarkerClusterer(map, markers);
</script>
<script type="text/javascript">
var markers=[];
var locations = [
['Corporate 3 DesignThis is where I work. i work with great people.', 41.249412, -96.03073, 1],
['This is simply a testThis is the info', 41.252615, -96.1338, 2]
];
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(41.22,-95.95),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker)
}
var markerCluster = new MarkerClusterer(map, markers);
</script>
Thank you for this! I was having the hardest time trying to decipher through the google documentation trying to figure out how they were passing variables but this makes a lot more sense now that I see it in use.
Also, thanks for the catch on the javascript type/text. Long day and I completely looked past it
Before you post, read our: 
Google Maps V3 - "MarkerClusterer is undefined"
Thank youuuuuu
