I'm trying to cluster my markers because the site is slow, but MarkerClusterer is not working on my site: http://www.estoestalca.cl
The code for the map is this:
function initialize() {
var styles = [ /* styles */ ];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(-35.4292213, -71.6561387),
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var infowindow;
var markerCluster = new MarkerClusterer(map);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
downloadUrl("http://estoestalca.cl/?page_id=22", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), markers[i].getAttribute("permalink"), latlng, markers[i].getAttribute("imagen"), markers[i].getAttribute("category"), markers[i].getAttribute("tag"), markers[i].getAttribute("fecha1"), markers[i].getAttribute("fecha2"));
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
});
function createMarker(name, permalink, latlng, imagen, category, tag, fecha1, fecha2) {
var image = 'puntos/palta-trans.png';
var marker = new MarkerWithLabel({
position: latlng,
icon: image,
title: category,
label: category,
labelAnchor: new google.maps.Point(3, 30),
labelClass: "label " + tag + " " + category, // the CSS class for the label
labelInBackground: false
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
var titulo = '<h2>' + name + '</h2>';
var image = '<a class="open fancybox" data-fancybox-type="iframe" href="' + permalink + '"><img src="' + imagen + '" alt="place" /></a>';
var fecha = '<p class="fecha"><span class="date1">' + fecha1 + '</span> / <span class="date2">' + fecha2 + '</span></p>';
var contentString = '<div class="info">' + image + fecha +'</div>';
var myOptions = {
content: contentString
,disableAutoPan: false
,pixelOffset: new google.maps.Size(0, 0)
,zIndex: null
,boxStyle: {
background: "#000"
,opacity: 0.75
,width: "180px"
}
,closeBoxMargin: "0px -3px 0px 0px"
,closeBoxURL: "http://www.jorgerock.com/CRUZ.png"
,infoBoxClearance: new google.maps.Size(130, 230)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
,maxWidth: 77
,maxHeight:75
};
infowindow = new google.maps.InfoWindow(myOptions);
infowindow.open(map, marker);
});
return marker;
}
}
The main problem is that in the console say this about markerclusterer.js: Uncaught TypeError: undefined is not a function.
I can't find the problem, by the way, after trying to add this to my website all markers are working fine.
Thanks!
markers
is an array of XML DOM elements.gmarkers
is the array of google.maps.Marker objects.Create a gmarkers array and change this:
To:
working fiddle (with normal marker, MarkerWithLabel doesn't work)