javascript - Google Maps v3 with MarkerClustererer not working with createmarker -

i'm trying cluster markers because site slow, markerclusterer not working on site: http://www.estoestalca.cl

the code map 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");       (var = 0; < 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, // css class 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 in console markerclusterer.js: uncaught typeerror: undefined not function.

i can't find problem, way, after trying add website markers working fine.

thanks!

markers array of xml dom elements.

var markers = data.documentelement.getelementsbytagname("marker"); 

gmarkers array of google.maps.marker objects.

create gmarkers array , change this:

downloadurl("http://estoestalca.cl/?page_id=22", function(data) {   var markers = data.documentelement.getelementsbytagname("marker");   (var = 0; < 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);  }); 

to:

downloadurl("http://estoestalca.cl/?page_id=22", function(data) {   var markers = data.documentelement.getelementsbytagname("marker");   (var = 0; < 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"));     gmarkers.push(marker);    }    var markercluster = new markerclusterer(map, gmarkers);  }); 

working fiddle (with normal marker, markerwithlabel doesn't work)