Adding Custom Markers (HTMLMarkers) to Clustering

Question

I have a working codepen demo of Google Maps Clustering. I'm trying to add in custom html element markers so I can have dynamic text like so:

However, when I add in my custom html element marker script (which works by itself) to my marker cluster script - it breaks.

Here's my script. If you comment in the broken section (lines 69 - 89) - it stops working.

// 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);

I can get custom markers to work in isolation and marker clustering to work in isolation, but not together.

Answer 1

There are a number of issues with your HTMLMarker definition. See:

• Remove HTML markers from Google Map
• Google Maps: Multiple Custom HTML Markers
• Google map HTMLMarker (loop different locations)

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);
}
// needed for the marker clusterer
HTMLMarker.prototype.getDraggable = function() {};
HTMLMarker.prototype.getPosition = function() {
  return this.pos
};
//init your html element here
// from https://stackoverflow.com/questions/29196855/google-maps-multiple-custom-html-markers
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';
}

proof of concept fiddle

code snippet:

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) {
    var htmlMarker = new HTMLMarker(location.lat, location.lng);
    return htmlMarker;
  });
  // var htmlMarker = new HTMLMarker(37.77, -122.43);
  //  htmlMarker.setMap(map);
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/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
};
//init your html element here
// from https://stackoverflow.com/questions/29196855/google-maps-multiple-custom-html-markers
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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>
<div id='map'></div>