Auto center coordinate and zoom for multiple markers

[jaballogian]

Hello,

I want to show dynamic multiple markers on the map. What I mean by dynamic markers is the markers are determined by the user selection (which markers do the user want to show).
I have checked this documentation https://react-google-maps-api-docs.netlify.app/ but can't find any example related to the specification I need.

I found an algorithm to count the center coordinate of multiple markers here https://stackoverflow.com/questions/10634199/find-center-of-multiple-locations-in-google-maps but only for the center coordinate (not with the best zoom level) and it's written with the original google maps api @googlemaps/js-api-loader.

How could I do search for the center coordinate and zoom for multiple markers with this @react-google-maps/api library?

[jaballogian]

Finally, I can use auto zoom and center with this library.

It's called bound animation.

After reading the Migration from [email protected] section from the documentation from the npm registry page here https://www.npmjs.com/package/@react-google-maps/api, I tried to combine the new way of calling the Google Map component for showing the map and initialize the bound then update the bound using the useEffect hook.

It worked.

[komalharmale]

@jaballogian can you please share some code here how you have implement

[zovanni]

@komalharmale check this out

@jaballogian can you please share some code here how you have implement

const Map = ({ locations, apiKey }) => {
	/**
	 * 
	 * Just in case, we start buiding an object and get an average center
	 * 
	 */
	const coordinates = {
		lat: [],
		lng: [],
	}

	locations.map(l => {
		coordinates.lat.push(Number(l.lat))
		coordinates.lng.push(Number(l.lng))
	})

	const averageLng = (Math.max(...coordinates.lng) + Math.min(...coordinates.lng)) / 2;
	const averageLat = (Math.max(...coordinates.lat) + Math.min(...coordinates.lat)) / 2;

	const [userZoom, setUserZoom] = useState(8);

	const [center, setCenter] = useState({
		//it will be overridden at onLoad
		lat: averageLat,
		lng: averageLng
	});

	//done, now let's find the actual bounds

	const mapContainerStyle = {
		width: "100%",
		minHeight: "500px",
	}

	const onLoad = useCallback(function callback(map) {
		//Type definitions for non-npm package Google Maps JavaScript API 3.50
		var bounds = new google.maps.LatLngBounds();
		locations.forEach((location) => {
			bounds.extend({ lat: Number(location.lat), lng: Number(location.lng) });
		})
		map.fitBounds(bounds); // <-------- resize based on markers, native 
	}, [])

	return (
		<Fragment>

			<GoogleMap
				mapContainerStyle={mapContainerStyle}
				center={center}
				onLoad={onLoad}
				options={
					{
						mapTypeControl: false,
						streetViewControl: false,
						// controlSize: 30,
						styles: mapStyles
					}
				}
				zoom={
					userZoom ? userZoom : 8
				}
			>
				{
					Object.values(locations).map((marker, idx) => {
						return (
							<Marker
								key={idx}
								id={marker.id}
								position={{
									lat: Number(marker?.lat),
									lng: Number(marker?.lng)
								}}
							/>
						)
					})
				}
			</GoogleMap>

		</Fragment>
	)
}


export default Map;

[manavshah47]

@jaballogian Could you please more simplify answer, because currently i am facing same problem...

[manavshah47]

https://www.npmjs.com/package/@react-google-maps/api Here in the example, they have used the onLoad function with a useCallback hook. From there, I got the understanding of use of the onLoad function to load all the markers and use the fitBounds function on markers to get the centre of all markers, and the zoom level for markers

Note: The fitBounds function is from the Google Maps library.

Here's an example:

`
import React from 'react';
import {GoogleMap, useLoadScript, MarkerF } from "@react-google-maps/api";
import { useSelector } from 'react-redux';

const HomePageMap = () => {

const { isLoaded } = useLoadScript({ googleMapsApiKey: "your-api-key-here" }); // store api key in env file for better security
let approvedDocs = useSelector(state => state.approvedSightingLocation.approvedSightings)
// here redux is used to store data, you can use api also to fetch data
if(!isLoaded) {
return

Loading...

} else {
return (
<>
<div className='box-shadow' style={{margin:"20px",padding:"1px"}}>
<GoogleMap options={{streetViewControl:false,zoomControl:true}} mapContainerClassName="main-map-image"
onLoad={(map) => {
const bounds = new window.google.maps.LatLngBounds();
approvedDocs.forEach((location) => {
bounds.extend({lat:parseFloat(location.lat),lng:parseFloat(location.lng)});
})
map.fitBounds(bounds);
}}
>
{approvedDocs.map((location) => {
return <MarkerF key={location.docid} position={{lat: parseFloat(location.lat),lng: parseFloat(location.lng)}}/>
})}


</>
)
}
}

export default HomePageMap

`