javascript - How to center map around area or markers? -

i have map displays "check-ins" of user. need cater first-time display of map in 2 scenarios:

1. the user has never checked in: in case zoom out such level display specific "area". area called "western cape, south africa". map, zoomed in red area on far edges of map , see that.
2. if user has checked in 1 or more places, zoom in user sees close-up view of places has checked in. example:

so red "blocks" area see on map. not whole nap.

this how create map:

mapdiv = document.getelementbyid('map'); map = new google.maps.map(mapdiv, {     center: markerlocation,     zoom: zoomlevel,  }); 

and add "markers" checkins:

marker = new google.maps.marker({     position: markerlocation,     label: '',     icon: 'img/map_marker.png',      map: map }); 

so guess need focus on "zoom level". determines how of map shown. keep in mind, map responsive, height , width varies. furthermore, markers placed in kinds of different places.

so how calculate zoomlevel show relevant information? i.e. area including map markers, or if there no map markers, area includes western cape?

update

i think first problem, can find center of western cape , use "center" of map. easy. it's easy in case of there being 1 single check-in. how find center of map if there more 1 check-in? in fact, 2 points not difficult, how find center of many points?!

google.maps.latlngbounds object, designed contain rectangular bounds. can created in 2 ways:

1. by passing it's bounds parameters constructior: var my_bounds = new google.maps.latlngbounds({east: -34, north: 151, south: -34, west: 151});
2. or create empty var my_bounds = new google.maps.latlngbounds(); create bounds no coordinates , coordinate add them using extend method, exapand them. if extend coordinate lat:20, lng:-12 bounds {e:20, n:-12, s:-12, w:20} if extend further lat:22, lng:10 bounds {e:22, n:10, s:-12, w:20} , on.

google.maps.map's function fitbounds(bounds) works in way calculates closest zoom level contain boundaries created (the viewport might larger bounds passed, never smaller) , center center of bounds rectangle , zooms , centers map using calculated values.

so tackle issues:

1.to zoom "western cape, south africa", create bounds hardcoded values of area, cca south:-34.985081, west:17.811984, north:-30.016613, east:24.265440 , fit viewport it, have:

var western_cape_bounds = new google.maps.latlngbounds({east: 24.265440, north: -30.016613, south: -34.985081, west: 17.811984}); map.fitbounds(western_cape_bounds); 

2.if have many markers, need iterate on of them, extend bounds , fit viewport them:

var marker_bounds = new google.maps.latlngbounds(); for(var = 0; < markers.length; i++){     marker_bounds.extend(markers[i].getposition());     //alternatively, if don't have markers created yet, can extend bounds this: marker_bounds.extend({lat: my_lat, lng:my_lng}); } map.fitbounds(marker_bounds);