I'll keep this short!
This will work if you're starting with a large number of locations and you have their latitude and longitude.
For this project I was working with React so we are using a helper function to parse a center out of those above items and pass it to the map component.
let centerMath = [0, 0];
locations.map((place) => {
centerMath[0] += place.latitude;
centerMath[1] += place.longitude;
}
centerMath[0] = centerMath[0] / locations.length;
centerMath[1] = centerMath[1] / locations.length;
setCenter({
lat: centerMath[0],
lng: centerMath[1],
});
Then we pass the state down to the map component and use it here (in my case in the GoogleMap component):
<GoogleMap
zoom={10}
center={center}
options={settings}
>
Feel free to scaffold this directly.
We're basically just adding all the lats and dividing by the number of places, same for longs. If we have two places at 0, 10 and 0, 20 then our center point comes out to be 0, 15. Not too complex but figured it might help someone out!
Cheers
-Elliot/Big Sis
Top comments (0)