google-maps-react-markers-example v0.0.0

google-maps-react-markers

Google Maps library that accepts markers as react components and works with React 18+.

It supports a small set of the props of Google Map React. Clustering also is possible. The library implements Google Maps Custom Overlays official library.

If you like this library, please consider supporting me ❤️

Install

yarn add google-maps-react-markers

or

npm install --save google-maps-react-markers

Usage

const App = () => {
	const mapRef = useRef(null);
	const [mapReady, setMapReady] = useState(false);

	/**
	 * @description This function is called when the map is ready
	 * @param {Object} map - reference to the map instance
	 * @param {Object} maps - reference to the maps library
	 */
	const onGoogleApiLoaded = ({ map, maps }) => {
		mapRef.current = map;
		setMapReady(true);
	};

	const onMarkerClick = (markerId) => {
		console.log("This is ->", markerId);
	};

	return (
		<>
			{mapReady && <div>Map is ready. See for logs in developer console.</div>}
			<GoogleMap
				defaultCenter={{ lat: 45.4046987, lng: 12.2472504 }}
				defaultZoom={5}
				options={mapOptions}
				mapMinHeight="100vh"
				onGoogleApiLoaded={onGoogleApiLoaded}
				onChange={(map) => console.log("Map moved", map)}
			>
				{coordinates.map(({ lat, lng, name }, index) => (
					<Marker key={index} lat={lat} lng={lng} markerId={name} onClick={onMarkerClick} />
				))}
			</GoogleMap>
		</>
	);
};

export default App;

Props

Clustering

For clustering, follow this guide using useSupercluster Hook, but use bounds in this way:

const onMapChange = ({ bounds, zoom }) => {
    const ne = bounds.getNorthEast();
    const sw = bounds.getSouthWest();
    /**
    * useSupercluster accepts bounds in the form of [westLng, southLat, eastLng, northLat]
    * const { clusters, supercluster } = useSupercluster({
    *	points: points,
    *	bounds: mapBounds.bounds,
    *	zoom: mapBounds.zoom,
    * })
    */
    setMapBounds({ ...mapBounds, bounds: [sw.lng(), sw.lat(), ne.lng(), ne.lat()], zoom });

    console.log("New bounds and zoom -> ", { bounds, zoom });
};

License

MIT © giorgiabosello