CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
user1596371
user1596371

Reputation:

Markers With Fixed Real (not on-screen) Radius and MarkerClusterer

I'm attempting to create a map that contains markers of a fixed real radius in metres. I'm using the CIRCLE symbol style but attempting to change the size of the circle using the scale option doesn't appear to be much the right way to go because it stays the same size on-screen regardless of the zoom level.

So, for example, I might want a 500m radius circle at a specific point and use:

var markerOptions = {
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 500
  },
  position: new google.maps.LatLng(0, 50)
};
marker = new google.maps.Marker(markerOptions);

But the marker size doesn't change size when I change zoom, staying the same number of pixels across regardless of zoom level.

I tried using google.maps.Circle as an alternative to google.maps.Marker, and although Circle has a radius option and that works just fine on the scaling side of things I can't use MarkerClusterer to group them together when there are lots of them on-screen at the same time, which is another requirement.

So how do I make both clustered marker groups and fixed-size markers work together?

Upvotes: 2

Views: 1253

Answers (1)

user1596371
user1596371

Reputation:

Thanks to the suggestion from @geocodezip I took a look at the source code for MarkerClusterer and managed to get it working with circles with a few tweaks. In case anyone else needs to do something similar here are the changes that I made to markercluster.js:

  • Changed all occurrences of getPosition() to getCenter()

  • Changed MarkerClusterer.prototype.pushMarkerTo_() to the following:

    MarkerClusterer.prototype.pushMarkerTo_ = function (marker) {
  // If the marker is draggable add a listener so we can update the clusters on the dragend:
  marker.isAdded = false;
  this.markers_.push(marker);
};

And now everything works using google.maps.Circle and MarkerClusterer.

Upvotes: 1

Related Questions