Google-maps-react: Fit bounds on first render

[ktosiek]

If the bounds are provided to

Currently fitBounds is only called from componentDidUpdate, and that is not called on first render: https://reactjs.org/docs/react-component.html#componentdidupdate

[japrescott]

any workaround?

[ktosiek]

I'm using something like this in the parent component:

  componentDidMount() {
    this.mapRef.current.map.fitBounds(this.getDefaultBounds());
  }
  render() { return <Map ref={this.mapRef} .../>; }

[sudomaxime]

Here is an easy solution without using ref (just change the pipeline operator on the bottom if you are not a babel.js hipster like me)

import React, { PureComponent } from 'react'
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react'

const mapStyles = {
  width: '100%',
  height: '100%'
}

export class MapContainer extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      bounds: null,
      markers: [
        {
          lat: 37.778519,
          lng: -122.405640
        },
        { 
          lat: 37.759703, 
          lng: -122.428093
        },
        { 
          lat: 38.759703, 
          lng: -125.428093
        }
      ]
    }
  }

  makeBounds = () => {
    var points = this.state.markers
    var bounds = new this.props.google.maps.LatLngBounds();
    for (var i = 0; i < points.length; i++) {
      bounds.extend(points[i]);
    }
    this.setState({bounds})
  }

  onReady = () => {
    this.makeBounds()
  }

  render() {
    return (
      <Map
        google={this.props.google}
        onReady={this.onReady}
        style={mapStyles}
        bounds={this.state.bounds}
      >
        {this.state.markers.map((marker,i) =>
          <Marker
            key={i}
            name={'Kenyatta International Convention Centre'}
            position={{lat: marker.lat, lng: marker.lng}}
          />
        )}

      </Map>
    )
  }
}

export default MapContainer |> GoogleApiWrapper({
  apiKey: 'YOUR_API_KEY'
})