How to add MarkerClusterer to google-map-react

Question

I want to implement MarkerClusterer in my google map. Is there any library or component I can use for the same. Thank you. This is how my code looks now. Thank you.

const handleApiLoaded = ({ map, maps }: MapProps) => {
    console.log(maps);
    mapRef.current = { map, maps };
    if (truckData.length > 0) {
      const bounds = getBounds(maps);
      map.fitBounds(bounds);
      bindResizeListener(map, maps, bounds);
    }
  };


 <GoogleMapReact
      bootstrapURLKeys={{ key: `${process.env.REACT_APP_GOOGLE_MAPS_KEY}` }}
      center={mapCenter}
      defaultZoom={14}
      options={{ zoomControlOptions: { position: 7 } }}
      layerTypes={isTraffic ? ["TrafficLayer"] : []}
      yesIWantToUseGoogleMapApiInternals
      onGoogleApiLoaded={handleApiLoaded}
    >
  </<GoogleMapReact>

interface MapProps {
  map: google.maps.Map;
  maps: {
    LatLngBounds: new () => google.maps.LatLngBounds;
  };

How can I use the Marker Clustering with google-map-react library. Thank you

Answer 1

I solved the clustering issue here https://github.com/google-map-react/google-map-react/issues/473

import React, {Component} from 'react'
import GoogleMapReact from 'google-map-react'
import MarkerClusterer from '@google/markerclusterer'

export default class GoogleMapContainer extends Component {
  componentDidMount () {
    const script = document.createElement('script')
    script.src = 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'
    script.async = true
    document.body.appendChild(script)
  }

  setGoogleMapRef (map, maps) {
    this.googleMapRef = map
    this.googleRef = maps
    let locations = [
      {lat: -31.563910, lng: 147.154312},
      {lat: -33.718234, lng: 150.363181},
      {lat: -33.727111, lng: 150.371124}]
    let markers = locations && locations.map((location) => {
      return new this.googleRef.Marker({position: location})
    })
    let markerCluster = new MarkerClusterer(map, markers, {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
      gridSize: 10,
      minimumClusterSize: 2
    })
  }

  static defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  }

  render () {
    return (
      <GoogleMapReact
        bootstrapURLKeys={{key: `PLACE_HOLDER`}}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({map, maps}) => this.setGoogleMapRef(map, maps)}
        defaultCenter={{lat: -31.563910, lng: 147.154312}}
        defaultZoom={15}
        options={{streetViewControl: true}}
      />
    )
  }
}

enter image description here