react-google-maps onBoundsChanged

Question

I am struggling to find a simple example on how to use onBoundsChanged. I noticed that this function is not explained in the documentation https://tomchentw.github.io/react-google-maps

My simple code looks like this:

import React, { Component } from 'react';
import { GoogleMap } from '@react-google-maps/api';


export class App extends Component {

  state = {
    mapLat: 48.210033,
    mapLng: 16.363449,
  }

  handleBoundsChanged = () => {
    console.log('BoundsChanged');
    // how do I get the center of the map on BoundsChange
    // update map center
    /*
    this.setState({
      mapLat: '?',
      mapLng: '?'
    })
    */
  }

  render() {
    return (
      <div>
            <GoogleMap
              center={{ lat: this.state.mapLat, lng: this.state.mapLng }}
              zoom={ 13 }
              onBoundsChanged={e => this.handleBoundsChanged(e)}
            />
      </div>
    );
  }
}

export default App;

I do not understand how to get the data from the map - onBoundsChanged. I need to get map center latitude and longitude so I can update the state. I would think this is basic functionality and it is easy for someone who already has done this. Thank you so much for all your kind help.

Answer 1

You can add a ref prop to access the map inside the component.

export class App extends Component {
   state = {
      mapLat: 48.210033,
      mapLng: 16.363449,
    };

   mapRef = React.createRef(); //class scope

Add the prop to map component

   <GoogleMap
      ref={this.mapRef}
      center={{ lat: this.state.mapLat, lng: this.state.mapLng }}
      zoom={ 13 }
      onBoundsChanged={e => this.handleBoundsChanged(e)}
    />

Then in the handler,

handleBoundsChanged = () => {
    const lat= this.mapRef.current.getCenter().lat();
    const lng = this.mapRef.current.getCenter().lng();

    this.setState({
      mapLat: lat,
      mapLng: lng
    });
  }