I'm trying out a basic implementation of clustering markers on a Google map using the Google Maps Utility Library v3.
When I run this though, I get an error on the Chrome Developer Tools console:
Uncaught TypeError: Object #<Object> has no method 'getPosition'
This relates to line 649 in the utility library script here: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js. Which is the following function:
/**
* Determins if a marker is contained in a bounds.
*
* @param {google.maps.Marker} marker The marker to check.
* @param {google.maps.LatLngBounds} bounds The bounds to check against.
* @return {boolean} True if the marker is in the bounds.
* @private
*/
MarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {
return bounds.contains(marker.getPosition());
};
The code I'm using is reasonably standard Google maps stuff, the main function for which is:
function initialize(items,loop,zoom) {
geocoder = new google.maps.Geocoder();
if (items.length > 0) {
var latlng = new google.maps.LatLng(items[0].Lat, items[0].Lng);
var myOptions = {
zoom: zoom,
center: latlng,
//mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
map.setOptions({styles: stylez});
for (var i = 0; i < items.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(items[i].Lat, items[i].Lng),
title: items[i].Title,
icon: _iconCenter,
shadow: shadow,
infocontent: items[i].Description
});
marker.setMap(map);
markersArray.push(marker);
}
var markerCluster = new MarkerClusterer(map, items);
google.maps.event.addListener(map, "tilesloaded", function () {
if(loop == true){
SetLoop();
}
});
}
}
I've traced the erroring function back as far as I understand and it should be receiving coordinates for the edges of the map to be able to determine the bounds, which should be just standard behaviour, but clearly something's not right.
I wondered if anyone could shed any light on this?
Thanks for any pointers folks...
The issue turned out to be the fact that I was declaring the markerclusterer script before the google maps script. Calling the maps script first solved it... obvious now!
The MarkerClusterer expects an array of markers. You create one, but pass the items array into its constructor. Change:
var markerCluster = new MarkerClusterer(map, items);
to:
var markerCluster = new MarkerClusterer(map, markersArray);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With