React-google-maps: e.getMarkers() - how can i get markers with props?

[GTOsss]

I have this code:

<MarkerClusterer
      averageCenter
      enableRetinaIcons
      gridSize={60}
      onClick={onClickCluster}
      zoomOnClick={false}
    >
      {[
        { x: 45, y: 40, id: 0 },
        { x: 46, y: 40, id: 1 },
        { x: 45, y: 41, id: 2 },
        { x: 45, y: 42, id: 3 },
        { x: 45.05, y: 40, id: 4 },
      ]
        .map((el, i) => (
          <Marker
            position={{ lat: el.x, lng: el.y }}
            onClick={e => onClickMarker(e, el)}
            id={i}
            ref={refMarkers}
          />
        ))}
    </MarkerClusterer>

If i use e.getMarkers- i get array of objects with markers but they don't have props. How can i get array of markers with props? I want to know ids from props of marker which contents cluster (when user click on cluster).

[tomchentw]

Yeah, only native getMarkers() (returns google.maps.Marker, not react-google-maps/Marker. Unfortunately.

Feel free to suggest a API change

[Wildhoney]

You'll have to map the google.maps.Marker to react-google-maps/Marker manually.

<MarkerClusterer onClick={cluster => this.filter(cluster.getMarkers(), coordinates)} />

Where coordinates is the full list of markers for the map, with some extra data that you need. You can then create the filter method which finds the coordinates based on what getMarkers yields:

filter(markers, coordinates) {

    const cluster = markers.map(model => [model.position.lat(), model.position.lng()]);
    const filtered = coordinates.filter(model => {
        return contains([model.position.lat(), model.position.lng()])(cluster); 
    });

}

Where filtered is now a filtered list of coordinates with the additional data that was used to render the <Marker /> components.

Note that I use the contains from Ramda because it makes equality a whole lot easier.

[DonnyVerduijn]

You should assign an id to a marker instance, by passing in an object to the options prop. These properties will be available through the marker instances when using getMarkers(). Note that while you can pass any key with any value you like, i would advise against doing this.

<MarkerClusterer> 
   <Marker options={{ id: 123, foo: "bar" }} />
</MarkerClusterer>

[Wildhoney]

Thanks @DonnyVerduijn – that's useful.

[ajay-bsoft]

@DonnyVerduijn Thanks a lot!. This options also work in MarkerWithLabel.