React-google-maps: Question: how to get the current zoom level?

[hugotox]

I need it to calculate the radius of an overlayview component I have in the map.
Any ideas how to get it?
Thanks a lot for this project!!

[tomchentw]

Using getZoom function using refs?

https://github.com/tomchentw/react-google-maps/blob/master/src/GoogleMap.js#L48

[hugotox]

Awesome. Thanks!

[adamryvola]

Please, can you explain me, why this.refs.gmap is undefined in componentDidMount? I would like to access bounds of map and calculate something.

export default class Map extends Component {

    componentDidMount() {
        console.log('GMAP: ' + this.refs.gmap);
    }

    render() {
        return (
            <GoogleMapLoader
                containerElement = {
                    <div style={{height: '300px', width: '100%'}} />
                }
                googleMapElement = {
                    <GoogleMap
                        ref={(googleMap) => this.gmap = googleMap}
                        defaultZoom={9}
                        defaultCenter={{ lat: this.props.markers[0].position.lat, lng: this.props.markers[0].position.lng }}
                        center={{ lat: this.props.markers[0].position.lat, lng: this.props.markers[0].position.lng }}>
                            {this.props.markers.map((marker, index) => {
                                return (<Marker {...marker} />);
                            })}
                    </GoogleMap>
                }
            />
        )
    };
}

[rewop]

@adamryvola please check the usage of refs on react documentation.

I believe the ref is undefined because the component passed in googleMapElement is not yet mounted in the dom, therefore the ref is available yet after the first render.

The ref is available only after this setState fires.

[adamryvola]

Soooo stupid question from me, thank you for your time :)
(I am React newbie)

[rewop]

@adamryvola No problem at all. Great to see always new people learning react :) Please close this issue if you think it is resolved.

Update: Issue is already closed actually ;P

[iBasit]

404 https://github.com/tomchentw/react-google-maps/blob/master/src/GoogleMap.js#L48