Generate GoogleMap.fitBound & set `setZoom`.

generate-googlemap.js

import {loadGoogleMaps} from '../actions/googleMaps';

currentMarkers = [];
map = null;

generateGoogleMaps(){
  const maps = this.props.gm.googleMaps;
  const div = this.googlemapref;
  if(div === undefined){
    console.warn('div is undefined');
    return;
  }
  if(maps === null){
    console.warn(this.refs,div,maps);
    return (<div>Loading Google Maps</div>);
  }

  const spots = this.props.currentArSpots.items;
  this.currentMarkers.length = 0;
  const bounds = new maps.LatLngBounds();
  for(const i in spots){
    const spot = spots[i];
    if(spot.geoPoint === undefined){continue;}
    const latitude = spot.geoPoint.latitude;
    const longitude = spot.geoPoint.longitude;
    const latlng = new maps.LatLng(latitude, longitude);
    bounds.extend(latlng);
    const marker = new maps.Marker({
      position:latlng,
      clickable:true
    });
    this.currentMarkers.push(marker);
  }

  this.map = new maps.Map(div, {zoom:16, center:new maps.LatLng(35, 135)});
  this.map.fitBounds(bounds);
  google.maps.event.addListenerOnce(this.map, 'bounds_changed', function(event) {
    if (this.getZoom() > 15) {
      this.setZoom(15);
    }
  });
  for(const i in this.currentMarkers){
    const marker = this.currentMarkers[i];
    marker.setMap(this.map);
    const spot = spots[i];
    maps.event.addListener(marker,'click',() => {
      if(this.infoWindow !== null){
        this.infoWindow.close();
      }
      this.infoWindow = new maps.InfoWindow({
        content: spot.name
      });
      this.infoWindow.open(this.map,marker);
    });
  }
}