How to get Marker's custom properties with getMarkers() method?

Question

I'm building an application that uses react-google-maps integration component and I have created a Marker's custom property 'id'. I have to access the clustered markers on a marker clusterer's click, but I can't seem to access the custom property that I have created through getMarkers() method.

{props.clusters.map(cluster => (
  <MarkerClusterer
    averageCenter
    enableRetinaIcons
    gridSize={60}
    onClick={(markerClusterer) => {
                const clickedMarkers = markerClusterer.getMarkers()
              }}
  >
    {cluster.markers.map(marker => (
      <Marker
        id={ marker.id}
        position={{ lat: marker.lat, lng: marker.lng }}
      />
    ))}
  </MarkerClusterer>
))}

Is there any other way to access the marker's custom property?

Answer 1

You could assign custom properties such as id via MarkerProps.options prop, like this:

<MarkerClusterer onClick={this.handleMarkerClustererClick}>
   {this.props.markers.map(marker => (
      <Marker
         options = {{marker.id}} 
         key={index}
         position={marker.ppos}
      />
    ))}
</MarkerClusterer>

These properties will be available through the marker instances when using MarkerClusterer.getMarkers method:

handleMarkerClustererClick(markerClusterer, pos) {
  const clickedMarkers = markerClusterer.getMarkers();
  for( let m of clickedMarkers){
    console.log(m.id); 
  }
}

Here is a demo