How to get the current zoom of the map [getZoom()] in react-google-maps?

Question

I want to get the current zoom level of my map in react-google-maps like we do in simple google map api with the getZoom() function. How to do this in react-google-maps ?

I have looked few answers but none of them are working for me.

import React from "react"
import {
  GoogleMap,
  Marker,
  withGoogleMap,
  withScriptjs,
} from "react-google-maps"


const Map = () => {
  return (
    <GoogleMap
      defaultZoom={15}
      defaultCenter={{ lat: lat, lng: lng }}
    >
      <Marker position={{ lat: lat, lng: lng }} />
    </GoogleMap>
  )
}

const WrappedMap = withScriptjs(withGoogleMap(Map))

const Index = () => {
  return (
    <Layout>
      <WrappedMap
        googleMapURL={`https://maps.googleapis.com/maps/api/js? 
        key=my_key&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<Loading />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </Layout>
  )
}

export default Index

How can I getZoom for the above shown example.

Answer 1

GoogleMap component from react-google-maps exposes onZoomChanged method which corresponds to native Google Map zoom_changed event and is triggered once the map's zoom level changes

Here is an example how to retrieve current zoom in WrappedMap component:

const Map = ({center,zoom}) => {

  function handleZoomChanged(){
    console.log(this.getZoom()) //this refers to Google Map instance
  }


  return (
    <GoogleMap defaultZoom={zoom} defaultCenter={center} onZoomChanged={handleZoomChanged} >
      <Marker position={center} />
    </GoogleMap>
  );
};

Another option would be to pass current zoom from a child component via onZoomChanged prop:

const Map = ({ center, zoom, onZoomChanged }) => {
  function handleZoomChanged() {
    onZoomChanged(this.getZoom()); //current zoom
  }

  return (
    <GoogleMap
      defaultZoom={zoom}
      defaultCenter={center}
      onZoomChanged={handleZoomChanged}
    >
      <Marker position={center} />
    </GoogleMap>
  );
};

and then introduce currentZoom state to store current zoom level in parent component:

const App = () => {

  const [currentZoom, setCurrentZoom] = useState(5);//default

  //print current Map zoom on button click
  function handleClick() {
    console.log(currentZoom);
  }

  function handleZoomChanged(newZoom) {
    setCurrentZoom(newZoom);
  }

  return (
    <div>
      <button onClick={handleClick}>Get Zoom</button>
      <Map
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyDurZQBXjtSzKeieXwtFeGe-jhZu-HEGQU"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        center={{ lat: -40.4338962, lng: 166.3297536 }}
        zoom={currentZoom}
        onZoomChanged={handleZoomChanged}
      />
    </div>
  );
};

Here is a demo