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)
Comments
Post a Comment