google-map-react centering the map with multiple markers

Question

How do I find the center of the map when I have more than 2 markers? When I have only 2 I've done it like this:

midPoint(trackingLocation, deliveryLocation) {
    if (deliveryLocation) {
      return [
        trackingLocation.lat + (deliveryLocation.lat - trackingLocation.lat) * 0.5,
        trackingLocation.lng + (deliveryLocation.lng - trackingLocation.lng) * 0.5
      ];
    } else {
      return trackingLocation;
    }
  }

But how do I calculate the center when I have 5 markers?

Thank you

do you have a github repo for this code ? – Thanveer Shah Nov 07 '19 at 12:03 — Thanveer Shah, Nov 07 '19 at 12:03

score 0 · Accepted Answer · answered Jun 04 '19 at 15:30

Find the rectangle that contains all the markers, then use the midpoint of that rectangle.

First, go through all the markers and find:

minLat
minLng
maxLat
maxLng

Then you can do the same calculation you did for two markers with these two points:

(minLat, minLng)
(maxLat, maxLng)

google-map-react centering the map with multiple markers

1 Answers1