CODEWITHSUNDEEP
reactjsgoogle-mapsreact-google-maps
user10095818
user10095818

Reputation: 121

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

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.

Upvotes: 4

Views: 17063

Answers (2)

user10095818
user10095818

Reputation: 121

react-google-maps/api

Copy the basic template from below make sure to give values to lat, lng, and apiKey

The GoogleMap component from "@react-google-maps/api" takes a prop onLoad which is of type function. This onLoad function takes a default parameter which is the current instance of the map.

I am using react hooks here to set the state in my functional component you can also use the class based component. Just setState of the current instance of map.

import React from "react"
import { GoogleMap, LoadScript } from "@react-google-maps/api"

const apikey = "YOUR_API_KEY_HERE"

// lat and lng are float numbers not string
const lat = lat_value
const lng = lng_value

const Map = props => {
  const [map, setMap] = React.useState(null)
  return (
    <LoadScript id="script-loader" googleMapsApiKey={apikey}>
      <GoogleMap
        // set the state with the current instance of map.
        onLoad={map => {
          setMap(map)
        }}
        mapContainerStyle={{
          height: "400px",
          width: "800px",
        }}
        zoom={16}
        center={{
          lat: lat,
          lng: lng,
        }}
        id="example-map"
        // here onZoomChanged we are accessing the current zoom value from our map
        //instance which is stored in the state
        onZoomChanged={() => {
          console.log(map.getZoom())
        }}
      >
        ...Your map components
      </GoogleMap>
    </LoadScript>
  )
}

export default Map

That should log the current zoom value in the console as soon as you change the zoom of your map.

Upvotes: 5

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59368

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

Upvotes: 5

Related Questions