React Google Map

Hi there,

Just a quick question to know if you have somewhere a quick implementation of GoogleMap component for React ?

I can’t find it in the documentation.

Thank you in advance for your answer :slight_smile:

Hi @MatthieuW,

In our examples we are using google-map-react through the usage of the connectHits connector.

If you want, you can also use others React component for Google Maps that exists as long as you connect it through the connectHits connector.

Thank you Marie Laure, I will try with this.


Thank you for your previous answer, every thing works almost like the demo ! … but I can’t find how you used marker clustering in this implementation (airbnb demo).

Any idea, or path to follow ?

Best regards.

Hi @MatthieuW,

I believe that we don’t have demo using marker clustering as far as I know. The google-map-react component feature this example:

They are using another library to compute the cluster.

Does this help?

I can use marker clustering, but what I think is a component who can show all hits of the index as clusters in the map. Actually, we have only the 20 markers of actual page (displayed as clusters or not).

Hello Matthieu,

Jumping here because I worked on a geoclustering project with both React-InstantSearch and google-map-react. :slight_smile:

You can find it right there:

For this demo, I compute the clusters both on the backend and on the frontend. Using the geohash of each record, I get Algolia to send me all the top level clusters using facet count. I’d be happy to tell you more about that if you are interested. However, that’s mainly interesting when you have a lot of records to display on the map.

For the frontend clusters, there are 2 steps:

  1. You need to get the position and count of the clusters in your map.

For that, I used supercluster. It will basically return a lat and long that you can display on the map.

  1. Display those clusters in the map.

That’s where connectHits kicks in. Using the clusters we got from the previous step, we return a list of markers in the render. That would give you a component that can display clusters. :slight_smile:

I hope it helps! Don’t hesitate if you need more details!

Hi @michael.sokol,

I’m trying the solve the same problem using Algolia. We used to use GeoHash and substring based on zoom level in our traditional mysql database. But since we moved to Algolia I’m trying to figure out how that can be achieved (clustering in the backend). I noticed you mentioned Facet Count on geohash. How do you control the length of geohash using facets and then group them together?. Do you mind elaborating abit more on that?