CODEWITHSUNDEEP
reactjsgoogle-maps-api-3react-google-maps
Andrew Rose
Andrew Rose

Reputation: 13

How do I access a Map object using React Google Maps API?

I am trying to access the getBounds method of a Google Map installed in my Web application using the new @react-google-maps/api library, which is a replacement for the unsupported react-google-maps library by tomchentw.

Unlike the old react-google-maps, this new library seems to have no means of accessing a Google Map object as defined here. Depending on how you go about TRYING to access a Google Map object, you will get one of two things:

1) simply placing a ref inside a tag gets you a GoogleMap object, which is not a Map object and does not have the getBounds method or anything else that would allow me to retrieve the bounds of the map (as far as I can tell). One of its child objects is the "Zh" object described below.

2) calling getInstance() upon the ref from point 1 gets you a mysterious, undocumented "Zh" object containing a cryptic assortment of data. This object is also present as a child of the GoogleMap.

Here they are in the console: https://i.sstatic.net/NCjn4.jpg

And here is the code which generated that console output (I used the onDragEnd callback to run some printing after I dragged the map in the application, since trying to immediately read the map's contents after storage made the code trip over some kind of race condition):

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

function NewMap(props){

    let mapRef = React.createRef()

    const boundsCallBack = () => {
        console.log(mapRef.current)
        console.log(mapRef.current.getInstance())
    }

    return (
        <LoadScript googleMapsApiKey={process.env.REACT_APP_MAP_KEY}>
            <GoogleMap
                {...props.theProps}
                onDragEnd={boundsCallBack}
                ref={mapRef}
            >
                <Marker position={props.theProps.center} />
            </GoogleMap>
        </LoadScript>
    )
}

export default NewMap

Neither the GoogleMap nor the Zh seems to provide any way to access an actual Map object or any method returning its vital statistics (such as its bounds). Does anyone know how to access a Map object and/or its vital statistics using this library?

Upvotes: 1

Views: 2636

Answers (1)

Akram Badah
Akram Badah

Reputation: 427

You can get it from onLoad event handler and put the map object in your state and use it where ever you want like this:

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

class NewMap extends Component {

    state = {map: {}}

    boundsCallBack = () => {
        const {map} = this.state;
        console.log('map: ', map)
    }

    handleMapLoad = (map) => {
        this.setState((state) => ({ ...state, map }));
    }

    render () {
      return (
        <LoadScript googleMapsApiKey={process.env.REACT_APP_MAP_KEY}>
            <GoogleMap
                {...this.props.theProps}
                onDragEnd={this.boundsCallBack}
                onLoad={this.handleMapLoad}
            >
                <Marker position={this.props.theProps.center} />
            </GoogleMap>
        </LoadScript>
      )
    }
}

export default NewMap

Upvotes: 3

Related Questions