React-google-maps: MarkerCluster

[melyourhero]

Hello. I guess you can help me. There's any possibility of getting the markers inside a cluster?

[Stupidism]

https://tomchentw.github.io/react-google-maps/addons/marker-clusterer

[melyourhero]

No about this. For example, I want to get data inside cluster by clicking on it. It is possible to get markers inside this cluster?

[Stupidism]

Read the document of MarkerCLuster. There is a getClusters or _getClusters method on MarkerCluster's ref

I tried once and it worked. But I didn't leave any code usable.
I could only get the GoogleMap markers in the cluster. By some way, maybe you can add some custom meta data in the GoogleMap markers.

---

I recalled that react-google-maps markers blocked custom meta data. Maybe it needs the library to loose the restrictions

[noushad-pp]

@melyourhero were you able to figure out a solution for this?

[melyourhero]

@noushad-pp
@Stupidism
Unfortunately, I have not found a way to get data from markers in a cluster. Are there any suggestions?

[noushad-pp]

@melyourhero I passed the ids of the data as the key of the associated marker and was able to get the list of markers oncluster click. I had to manually recreate data from the returned marker keys and was unable to get the any custom data passed to the marker.

```import {default as React, Component} from "react";
import { withGoogleMap, GoogleMap, Circle, Marker} from "react-google-maps";
import MarkerClusterer from "react-google-maps/lib/addons/MarkerClusterer";

const GeolocationMap = withGoogleMap(props => (
{props.mapItems.map(item => (

))}


));

class geoMap extends Component {
handleMapMounted = (map) =>{
console.log(map);
};

handleMapChanges = () => {
    var currBounds = this._map.getBounds();
    var currCenter = this._map.getCenter();
    var bounds = {
        ne_lat: currBounds.getNorthEast().lat(),
        ne_lon: currBounds.getNorthEast().lng(),
        sw_lat: currBounds.getSouthWest().lat(),
        sw_lon: currBounds.getSouthWest().lng(),
    };
};

clusterClicked = (markers) => {
    console.log(markers.getMarkers())
};

render(){
        var mapContainerElement = <div className="GeoMapContainer"/>;
        var mapElement = <div className="GeoMapElement"/>;
        return (
            <GeolocationMap
                containerElement={mapContainerElement}
                mapElement={mapElement}
                onMapMounted={this.handleMapMounted}
                center={this.props.map_center}
                zoom={this.props.zoom}
                onClusterClicked={this.clusterClicked}
                mapItems={this.props.map_items}
            />
        );
}

};

```

[melyourhero]

@noushad-pp The same thing. I can't get any data which I passed to marker component.

[noushad-pp]

@melyourhero you can JSON.stringify the data and pass it as title of the marker and later on parse it . This can be used as a dirty hack if you are not passing any actual title param to the marker. I havent tried it though

[melyourhero]

@noushad-pp Yes, you were right. Thank you very much for your help.
Closed.