title: Adding Custom Markers (HTMLMarkers) to Clustering
body: <p>I have a working codepen demo of <a href="https://codepen.io/anon/pen/GxEgXg?editors=0010" rel="nofollow noreferrer">Google Maps Clustering</a>.  I'm trying to add in custom html element markers so I can have dynamic text like so:</p>
  
  <p><a href="https://i.stack.imgur.com/0SYTE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0SYTE.png" alt="enter image description here"></a></p>
  
  <p>However, when I add in my custom html element marker script (which works by itself) to my marker cluster script - it breaks.</p>
  
  <p>Here's my script.  If you comment in the broken section (lines 69 - 89) - it stops working.</p>
  
  <pre><code>// WORKING
  
  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 markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        label: labels[i % labels.length]
      });
    });
  
    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath:
        "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
    });
  }
  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
    }
  ];
  
  // BROKEN
  
  // HTMLMarker.prototype = new google.maps.OverlayView();
  // HTMLMarker.prototype.onRemove = function() {};
  
  // HTMLMarker.prototype.onAdd = function() {
  //  div = document.createElement("DIV");
  //  div.className = "marker";
  //  div.innerHTML = "$500";
  //  var panes = this.getPanes();
  //  panes.overlayImage.appendChild(div);
  // };
  
  // HTMLMarker.prototype.draw = function() {
  //  var overlayProjection = this.getProjection();
  //  var position = overlayProjection.fromLatLngToDivPixel(this.pos);
  //  var panes = this.getPanes();
  //  panes.overlayImage.style.left = position.x + "px";
  //  panes.overlayImage.style.top = position.y + "px";
  // };
  
  // var htmlMarker = new HTMLMarker(37.77, -122.43);
  // htmlMarker.setMap(map);
  </code></pre>
  
  <p>I can get custom markers to work in isolation and marker clustering to work in isolation, but not together.</p>