How I Can Use A Custommarker With Markerclustererplus?

I have the following jsFiddle code var map; var overlay; function initialize() { var opts = { zoom: 9, center: new google.maps.LatLng(-34.397, 151.644),

Solution 1:

Add the .getDraggable method to your CustomMarker:

CustomMarker.prototype.getDraggable = function() { returnfalse; };

working fiddle

code snippet:

varMC;
var MC_Opc = {
  gridSize: 50,
  maxZoom: 15,
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
varMARKER;
varMARKERS = [];
// examplevar map;
var overlay;

functioninitialize() {
  var opts = {
    zoom: 9,
    center: new google.maps.LatLng(-34.397, 151.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), opts);

  overlay = newCustomMarker(new google.maps.LatLng(-34.345, 151.65), map, "hola", null);
  var overlay2 = newCustomMarker(new google.maps.LatLng(-34.395, 151.644), map, "hello", null);
  MC = newMarkerClusterer(map, [], MC_Opc);
  MARKERS.push(overlay);
  MARKERS.push(overlay2);
  MC = newMarkerClusterer(map, MARKERS, MC_Opc);
}

google.maps.event.addDomListener(window, "load", function() {
  initialize();
});

functionCanvasCrear(texto, height_, div) {
  var context;
  var canvas = document.createElement("canvas");
  canvas.style.cssText = 'color: Black; background: #ffffff; background: url(data:image/svg+xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmI0NDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffb442)); background: -webkit-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -o-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -ms-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: linear-gradient(to bottom, #ffffff 0%, #ffb442 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffb442", GradientType=0); border-width: 1px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-family:"Lucida Grande", "Arial", sans-serif; pointer-events: none;';

  var txtWidth;
  txtWidth = canvas.getContext("2d");
  txtWidth.font = "12px Sans-Serif";

  var width_ = txtWidth.measureText(texto).width; //Calculando el width de la letra//console.log(width_);//canvas.style.border = "thin solid black";
  canvas.setAttribute("width", (width_ + "px"));
  canvas.setAttribute("height", (height_ + "px"));

  context = canvas.getContext("2d");
  context.font = "12px Sans-Serif";

  context.fillStyle = "black";
  context.fillText(texto, 0, 12);

  return div.appendChild(canvas);
}


functionCustomMarker(position, map, text, icon) {
  this.latlng_ = position;
  this.text_ = text;
  this.icon = icon;
  // Once the LatLng and text are set, add the overlay to the map.  This will// trigger a call to panes_changed which should in turn call draw.this.setMap(map);
}


CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.getDraggable = function() {
  returnfalse;
};
CustomMarker.prototype.draw = function() {
  var me = this;

  // Check if the div has been created.var div = this.div_;
  if (!div) {
    // Create a overlay text DIV
    div = this.div_ = document.createElement('DIV');
    // Create the DIV representing our CustomMarker
    div.style.border = "none";
    div.style.position = "absolute";
    div.style.paddingLeft = "0px";
    div.style.cursor = 'pointer';


    CanvasCrear(this.text_, 15, div)

    google.maps.event.addDomListener(div, "click", function(event) {
      google.maps.event.trigger(me, "click");
    });

    // Then add the overlay to the DOMvar panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }

  // Position the overlay var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (point) {
    div.style.left = point.x + 'px';
    div.style.top = point.y + 'px';
  }
};

CustomMarker.prototype.remove = function() {
  // Check if the overlay was on the map and needs to be removed.if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};

CustomMarker.prototype.getPosition = function() {
  returnthis.latlng_;
};


functionaddOverlay() {
  overlay.setMap(map);
}

functionremoveOverlay() {
  overlay.setMap(null);
}

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#map_canvas {
  width: 100%;
  height: 100%;
}

<scriptsrc="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script><divid="map_canvas"width="300"height="200"></div>