title: How to center map around area or markers?
body: <p>I have a map that displays "check-ins" of a user. I need to cater for the first-time display of this map in 2 scenarios:</p>
  
  <ol>
  <li>The user has never checked in: In this case I would like to zoom out to such a level that it display a specific "area". That area is called "Western Cape, South Africa". So essentially this <a href="https://www.google.co.za/maps/place/Western+Cape/@-32.5516416,16.490427,6z/data=!4m5!3m4!1s0x1dcc5d887a698df3:0xe98e798f2136a28b!8m2!3d-33.2277918!4d21.8568586" rel="nofollow noreferrer">map</a>, but zoomed in so the red area is on the far edges of the map and you only see that. </li>
  <li>If the user has checked in to one or more places, I would like to zoom in so that the user only sees a close-up view of the places he has checked in. For example:</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/7Gjib.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Gjib.png" alt="enter image description here"></a></p>
  
  <p>So the red "blocks" is the area that I would like to see on the map. Not the whole nap.</p>
  
  <p>This is how I create the map:</p>
  
  <pre><code>mapDiv = document.getElementById('map');
  map = new google.maps.Map(mapDiv, {
      center: markerLocation,
      zoom: zoomLevel, 
  });
  </code></pre>
  
  <p>And then I add "markers" for the checkins:</p>
  
  <pre><code>marker = new google.maps.Marker({
      position: markerLocation,
      label: '',
      icon: 'img/map_marker.png', 
      map: map
  });
  </code></pre>
  
  <p>So my guess is that I need to focus on the "Zoom Level". As that is what determines how much of the map is shown. But keep in mind, this map is responsive, so the height and width varies. Furthermore, the markers could be placed in all kinds of different places.</p>
  
  <p>So how do I calculate the ZoomLevel to only show the relevant information? I.e. only an area including the map markers, or if there are no map markers, an area that only includes the Western Cape?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I think for the first problem, I can find the center of the Western Cape and use that as the "center" of the map. Which is easy. It's also easy in the case of there being one single check-in. But how do you find the center of the map if there are more than 1 check-in? In fact, even 2 points would probably not be too difficult, but how do you find the center of MANY points?!</p>