How can I open InfoWindow inside custom cluster Marker - Google Maps

Question

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: {
      lat: 37.773972,
      lng: -122.431297
    },
    gestureHandling: "greedy",
    disableDefaultUI: true
  });

  var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var infoWin = new google.maps.InfoWindow();
  var markers = locations.map(function(location, i) {
    var htmlMarker = new HTMLMarker(location.lat, location.lng);
    	google.maps.event.addListener(htmlMarker, 'click', function(evt) {
			infoWin.setContent("Open my info window");
			infoWin.open(map, htmlMarker);

		});
    
    return htmlMarker;
  });
  
  
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
  });
}
google.maps.event.addDomListener(window, 'load', initMap);
var locations = [{
    lat: 37.77,
    lng: -122.44
  },
  {
    lat: 37.78,
    lng: -122.45
  },
  {
    lat: 37.79,
    lng: -122.42
  },
  {
    lat: 37.72,
    lng: -122.43
  },
  {
    lat: 37.74,
    lng: -122.42
  },
  {
    lat: 37.75,
    lng: -122.41
  },
  {
    lat: 37.75,
    lng: -122.43
  },
  {
    lat: 37.79,
    lng: -122.43
  },
  {
    lat: 37.78,
    lng: -122.43
  }
];


function HTMLMarker(lat, lng) {
  this.lat = lat;
  this.lng = lng;
  this.pos = new google.maps.LatLng(lat, lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {
  if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
    this.div.parentNode.removeChild(this.div);
}
HTMLMarker.prototype.getDraggable = function() {};
HTMLMarker.prototype.getPosition = function() {
  return this.pos
};

HTMLMarker.prototype.onAdd = function() {
  this.div = document.createElement('DIV');
  this.div.className = "htmlMarker";
  this.div.style.position = 'absolute';
  this.div.innerHTML = "$500";
  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div);
}

HTMLMarker.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var position = overlayProjection.fromLatLngToDivPixel(this.pos);
  var panes = this.getPanes();
  this.div.style.left = position.x + 'px';
  this.div.style.top = position.y + 'px';
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.htmlMarker {
  background-color: black;
  border-radius: 50%;
  padding: 10px;
  color: white;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4a6qqpfCMP8S31X6l3IKi5BLE7g3sbY4&callback=initMap"></script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id='map'></div>

I am tring to create a event open a info Window Inside the custom marker.

I am follow this nice tutorial http://jsfiddle.net/geocodezip/psp42y7e/2/ and works I create my custom marker. But the problem is when I'ved tried to call my function and pass my Marker as args the click event does not fire.

How can I open the infoWindow inside my custom marker?

On this part of my code I tried to add a infoWindow to my custom cluster marker

var infoWin = new google.maps.InfoWindow();
  var markers = locations.map(function(location, i) {
    var htmlMarker = new HTMLMarker(location.lat, location.lng);
        google.maps.event.addListener(htmlMarker, 'click', function(evt) {
            infoWin.setContent("Open my info window");
            infoWin.open(map, htmlMarker);

        });

    return htmlMarker;

---

function initMap() {
      var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: {
          lat: 37.773972,
          lng: -122.431297
        },
        gestureHandling: "greedy",
        disableDefaultUI: true
      });

      var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      var infoWin = new google.maps.InfoWindow();
      var markers = locations.map(function(location, i) {
        var htmlMarker = new HTMLMarker(location.lat, location.lng);
            google.maps.event.addListener(htmlMarker, 'click', function(evt) {
                infoWin.setContent("Open my info window");
                infoWin.open(map, htmlMarker);

            });

        return htmlMarker;
      });


      var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
      });
    }
    google.maps.event.addDomListener(window, 'load', initMap);
    var locations = [{
        lat: 37.77,
        lng: -122.44
      },
      {
        lat: 37.78,
        lng: -122.45
      },
      {
        lat: 37.79,
        lng: -122.42
      },
      {
        lat: 37.72,
        lng: -122.43
      },
      {
        lat: 37.74,
        lng: -122.42
      },
      {
        lat: 37.75,
        lng: -122.41
      },
      {
        lat: 37.75,
        lng: -122.43
      },
      {
        lat: 37.79,
        lng: -122.43
      },
      {
        lat: 37.78,
        lng: -122.43
      }
    ];


    function HTMLMarker(lat, lng) {
      this.lat = lat;
      this.lng = lng;
      this.pos = new google.maps.LatLng(lat, lng);
    }
    HTMLMarker.prototype = new google.maps.OverlayView();
    HTMLMarker.prototype.onRemove = function() {
      if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
        this.div.parentNode.removeChild(this.div);
    }
    HTMLMarker.prototype.getDraggable = function() {};
    HTMLMarker.prototype.getPosition = function() {
      return this.pos
    };

    HTMLMarker.prototype.onAdd = function() {
      this.div = document.createElement('DIV');
      this.div.className = "htmlMarker";
      this.div.style.position = 'absolute';
      this.div.innerHTML = "$500";
      var panes = this.getPanes();
      panes.overlayImage.appendChild(this.div);
    }

    HTMLMarker.prototype.draw = function() {
      var overlayProjection = this.getProjection();
      var position = overlayProjection.fromLatLngToDivPixel(this.pos);
      var panes = this.getPanes();
      this.div.style.left = position.x + 'px';
      this.div.style.top = position.y + 'px';
    }

Answer 1

The HTMLMarker as written doesn't handle click events. To add click event handling, change the .onAdd method to add a click event listener that triggers a click event on the object (and returns its position as a property of the event).

HTMLMarker.prototype.onAdd = function() {
  this.div = document.createElement('DIV');
  this.div.className = "htmlMarker";
  this.div.style.position = 'absolute';
  this.div.style.cursor = 'pointer';
  this.div.innerHTML = "$500";
  var that = this;
  this.div.addEventListener("click", function(evt) {
    google.maps.event.trigger(that, 'click', {latLng: that.pos})
  })
  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div);
}

proof of concept fiddle

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.htmlMarker {
  background-color: black;
  border-radius: 50%;
  padding: 10px;
  color: white;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 12,
      center: {
        lat: 37.773972,
        lng: -122.431297
      },
      gestureHandling: "greedy",
      disableDefaultUI: true
    });

    var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var infoWin = new google.maps.InfoWindow();
    var markers = locations.map(function(location, i) {
      var htmlMarker = new HTMLMarker(location.lat, location.lng);
      google.maps.event.addListener(htmlMarker, 'click', function(evt) {
        console.log("htmlMarker click@" + evt.latLng.toUrlValue(6));
        infoWin.setContent("Open my info window<br>marker #" + i);
        infoWin.setOptions({
          pixelOffset: new google.maps.Size(20, 0)
        })
        infoWin.open(map, htmlMarker);

      });
      return htmlMarker;
    });


    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
    });
  }
  google.maps.event.addDomListener(window, 'load', initMap);
  var locations = [{
      lat: 37.77,
      lng: -122.44
    },
    {
      lat: 37.78,
      lng: -122.45
    },
    {
      lat: 37.79,
      lng: -122.42
    },
    {
      lat: 37.72,
      lng: -122.43
    },
    {
      lat: 37.74,
      lng: -122.42
    },
    {
      lat: 37.75,
      lng: -122.41
    },
    {
      lat: 37.75,
      lng: -122.43
    },
    {
      lat: 37.79,
      lng: -122.43
    },
    {
      lat: 37.78,
      lng: -122.43
    }
  ];


  function HTMLMarker(lat, lng) {
    this.lat = lat;
    this.lng = lng;
    this.pos = new google.maps.LatLng(lat, lng);
  }
  HTMLMarker.prototype = new google.maps.OverlayView();
  HTMLMarker.prototype.onRemove = function() {
    if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
      this.div.parentNode.removeChild(this.div);
  }
  HTMLMarker.prototype.getDraggable = function() {};
  HTMLMarker.prototype.getPosition = function() {
    return this.pos
  };

  HTMLMarker.prototype.onAdd = function() {
    this.div = document.createElement('DIV');
    this.div.className = "htmlMarker";
    this.div.style.position = 'absolute';
    this.div.style.cursor = 'pointer';
    this.div.innerHTML = "$500";
    var that = this;
    this.div.addEventListener("click", function(evt) {
      console.log("click");
      google.maps.event.trigger(that, 'click', {
        latLng: that.pos
      })
    })
    var panes = this.getPanes();
    panes.overlayImage.appendChild(this.div);
  }

  HTMLMarker.prototype.draw = function() {
    var overlayProjection = this.getProjection();
    var position = overlayProjection.fromLatLngToDivPixel(this.pos);
    var panes = this.getPanes();
    this.div.style.left = position.x + 'px';
    this.div.style.top = position.y + 'px';
  }
  google.maps.event.addDomListener(window, 'load', initMap);
</script>