title: How to Fit Boundaries and Center React Google Maps
body: <p>I am new to React Google Maps. I am using this library to create a map with several locations and trying fit the boundaries and center it. I have used <a href="https://medium.com/@allynak/how-to-use-google-map-api-in-react-app-edb59f64ac9d" rel="nofollow noreferrer">this example</a>.</p>
  <p>After I populate the map, I want the map to change its center based on the places which have been populated rather than the default center. I am unable to achieve this. The following is my code.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;
  import {
    GoogleMap,
    LoadScript,
    Marker,
    InfoWindow,
  } from &quot;@react-google-maps/api&quot;
  
  const Map = () =&gt; {
    const mapStyles = {
      height: &quot;400px&quot;,
      width: &quot;100%&quot;,
    }
  
    const defaultCenter = {
      lat: 39.76866069032195,
      lng: -86.15818042985295,
    }
  
    const locations = [
      {
        name: &quot;Location 1&quot;,
        location: {
          lat: 41.3954,
          lng: 2.162,
        },
      },
      {
        name: &quot;Location 2&quot;,
        location: {
          lat: 41.3917,
          lng: 2.1649,
        },
      },
      {
        name: &quot;Location 3&quot;,
        location: {
          lat: 41.3773,
          lng: 2.1585,
        },
      },
      {
        name: &quot;Location 4&quot;,
        location: {
          lat: 41.3797,
          lng: 2.1682,
        },
      },
      {
        name: &quot;Location 5&quot;,
        location: {
          lat: 41.4055,
          lng: 2.1915,
        },
      },
    ]
  
    const [selected, setSelected] = useState({})
    const [map, setMap] = useState(null)
  
    const onSelect = item =&gt; {
      setSelected(item)
    }
  
    const Somefunction = map =&gt; {
      const bounds = new window.google.maps.LatLngBounds()
      locations.map((location, i) =&gt; {
        bounds.extend(new window.google.maps.LatLng(location.lat, location.lng))
      })
      map.fitBounds(bounds)
      setMap(map)
    }
  
    return (
      &lt;div className=&quot;map-container&quot;&gt;
        &lt;LoadScript googleMapsApiKey=&quot;AIzaSyBTNL1jQzyjzbgp_yRmFPlPPQ6UOQAeyI0&quot;&gt;
          &lt;GoogleMap
            mapContainerStyle={mapStyles}
            zoom={13}
            center={defaultCenter}
            onLoad={map =&gt; {
              const bounds = new window.google.maps.LatLngBounds()
              map.fitBounds(bounds)
              setMap(map)
            }}
          &gt;
            {locations.map(item =&gt; {
              return (
                &lt;Marker
                  key={item.name}
                  position={item.location}
                  onClick={() =&gt; onSelect(item)}
                /&gt;
              )
            })}
            {selected.location &amp;&amp; (
              &lt;InfoWindow
                position={selected.location}
                clickable={true}
                onCloseClick={() =&gt; setSelected({})}
              &gt;
                &lt;p&gt;{selected.name}&lt;/p&gt;
              &lt;/InfoWindow&gt;
            )}
          &lt;/GoogleMap&gt;
        &lt;/LoadScript&gt;
      &lt;/div&gt;
    )
  }
  export default Map
  </code></pre>
  <p>With the current code, the map gets centered in some bizarre location and not in the middle of the 5 locations listed above.</p>
  <p>I would also appreciate if someone can shed light on how to change the zoom level for different screen size automatically.</p>