A step-by-step guide on incorporating MarkerClusterer into a google-map-react component

Question

A step-by-step guide on incorporating MarkerClusterer into a google-map-react component

I am looking to integrate MarkerClusterer into my Google Map using a library or component. Here is a snippet of my current code. Can anyone provide guidance on how I can achieve this with the google-map-react library? 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;
  };

Could someone please assist me in implementing Marker Clustering with the google-map-react library? Thank you!

typescript google-maps frontend material-ui google-map-react

Answer 1

Answer №1

Successfully resolved the clustering issue by implementing the solution provided here

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}}
      />
    )
  }
}

view image description here

Answer 2

Successfully resolved the clustering issue by implementing the solution provided here

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}}
      />
    )
  }
}

view image description here

Answer 3

Answer №2

const setGoogleMapReference = ({ map, maps }: MapProps) => {
    mapRef.current = { map, maps };
    const markers =
      truckData &&
      truckData.map(data => {
        const latitude = data.coords.coordinates[0];
        const longitude = data.coords.coordinates[1];
        const location = { lat: latitude, lng: longitude };
        return new maps.Marker({ position: location });
      });
    const markerCluster = new MarkerClusterer(map, markers, {
      imagePath: "img/m1",
      gridSize: 30,
      minimumClusterSize: 5,
    });
  };

  useEffect(() => {
    if (mapRef.current) {
      const { map, maps } = mapRef.current;
    }
  }, [mapRef]);

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

I made a necessary addition with the useEffect for mapRef. Due to constraints with the provided images from https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer/images, I had to include them in the public/img folder. Appreciate your understanding.

Answer 4

const setGoogleMapReference = ({ map, maps }: MapProps) => {
    mapRef.current = { map, maps };
    const markers =
      truckData &&
      truckData.map(data => {
        const latitude = data.coords.coordinates[0];
        const longitude = data.coords.coordinates[1];
        const location = { lat: latitude, lng: longitude };
        return new maps.Marker({ position: location });
      });
    const markerCluster = new MarkerClusterer(map, markers, {
      imagePath: "img/m1",
      gridSize: 30,
      minimumClusterSize: 5,
    });
  };

  useEffect(() => {
    if (mapRef.current) {
      const { map, maps } = mapRef.current;
    }
  }, [mapRef]);

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

I made a necessary addition with the useEffect for mapRef. Due to constraints with the provided images from https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer/images, I had to include them in the public/img folder. Appreciate your understanding.

Answer 5

Answer №3

import GoogleMap from "google-map-react";
import { MarkerClusterer } from "@googlemaps/markerclusterer";
import React from "react";

const handleApiLoaded = (map, maps) => {
  const markers = [];
  const infoWindows = [];

  const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
  ];

  locations.forEach((location) => {
    markers.push(
      new maps.Marker({
        position: {
          lat: location.lat,
          lng: location.lng,
        },
        map,
      })
    );
  });

  new MarkerClusterer({ markers, map });
};
//Displaying Google Map using GoogleMap React library
function DisplayGoogleMap() {
  return (
    <GoogleMap
      defaultCenter={{ lat: -31.56391, lng: 147.154312 }}
      defaultZoom={15}
      bootstrapURLKeys={{ key: "keyCode" }}
      yesIWantToUseGoogleMapApiInternals
      onGoogleApiLoaded={({ map, maps }) => {
        handleApiLoaded(map, maps);
      }}
      options={{ streetViewControl: true }}
    />
  );
}

export default DisplayGoogleMap;

Answer 6

import GoogleMap from "google-map-react";
import { MarkerClusterer } from "@googlemaps/markerclusterer";
import React from "react";

const handleApiLoaded = (map, maps) => {
  const markers = [];
  const infoWindows = [];

  const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
  ];

  locations.forEach((location) => {
    markers.push(
      new maps.Marker({
        position: {
          lat: location.lat,
          lng: location.lng,
        },
        map,
      })
    );
  });

  new MarkerClusterer({ markers, map });
};
//Displaying Google Map using GoogleMap React library
function DisplayGoogleMap() {
  return (
    <GoogleMap
      defaultCenter={{ lat: -31.56391, lng: 147.154312 }}
      defaultZoom={15}
      bootstrapURLKeys={{ key: "keyCode" }}
      yesIWantToUseGoogleMapApiInternals
      onGoogleApiLoaded={({ map, maps }) => {
        handleApiLoaded(map, maps);
      }}
      options={{ streetViewControl: true }}
    />
  );
}

export default DisplayGoogleMap;

A step-by-step guide on incorporating MarkerClusterer into a google-map-react component

Answer №1

Answer №2

Answer №3

Similar questions

Angular2 - Breaking down applications into reusable components

What is the method to adjust the width of the popover in Material UI Autocomplete?

struggling with configuring dependency injection in NestJS and TypeORM

Managing MUI form fields using React

Can you explain the concept of being "well-typed" in TypeScript?

Error: The function to create deep copies of objects is not working properly due to TypeError: Object(...) is not a

The exclude option in Nest JS middleware does not prevent the middleware from running on excluded routes

"Implementing automated default values for Select/dropdown lists in ReactJs, with the added capability to manually revert back to the default selection

Magical Stylist - Eradicate Indicators while Preserving Labeling

Utilize TypeScript to import a JSON file

Angular 14: Deleting an item from a FormArray triggers unintended form submission due to Angular animation

Working with arrow functions in TypeScript syntax

Module '@tanstack/react-table' cannot be located even though it has been successfully installed

There has been no answer provided. Could this be due to being utilized in an asynchronous function that was not returned as a promise?

Guide: Populating an MUI Autocomplete TextField using data fetched from Axios

Leveraging Ionic 2 with Moment JS for Enhanced TimeZones

Inheriting Angular components: How can the life cycle hooks of a parent component be triggered?

Updated the application to Angular 6 but encountered errors when attempting to run npm run build --prod. However, running the command npm run build --env=prod was executed without any issues

The KeyConditionExpression is invalid due to the use of multiple attribute names within a single condition

Can components be SSGed individually rather than entire pages?