typescriptgoogle-mapsfrontendmaterial-uigoogle-map-react

How to add MarkerClusterer to google-map-react


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


Solution

  • 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