...

View Full Version : Google Maps V3 - "MarkerClusterer is undefined"



dylanbaumannn
11-01-2012, 10:03 PM
Hello!

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)


<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

xelawho
11-02-2012, 03:35 AM
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

dylanbaumannn
11-05-2012, 11:10 PM
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



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



<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

xelawho
11-06-2012, 12:09 AM
There are a couple of problems here. The error you are getting is because you are not declaring the script type correctly. This line:

<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="type/javascript"></script>
should be this:

<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>

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:



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

Old Pedant
11-06-2012, 12:42 AM
Ummm...Xelawho, the two <script> tags that you posted are IDENTICAL.

Here they are, both in a single block:


<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="type/javascript"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>


And here is his (red) compared to yours (blue):


<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="type/javascript"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>

What are you seeing that my blind eyes don't see?

xelawho
11-06-2012, 01:19 AM
... type="type/javascript">
vs.

... type="text/javascript">

Old Pedant
11-06-2012, 01:42 AM
LOL! I was looking at the URL and flat out missed that. Yes, I do need new eyes. Or maybe a new brain.

"Igor! Where are you? I need you to make a withdrawal down at the brain bank."

dylanbaumannn
11-06-2012, 03:48 PM
<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 :p



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum