2

Im using google-maps-react, and it works pretty good, but i just cant understand how can i work with Google Maps API's methods inside my component. Now i need to getBounds of rendered map, but cant find any way to do this. Here is the code, any help would be appreciated.

import React from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

const GOOGLE_MAPS_JS_API_KEY='AIzaSyB6whuBhj_notrealkey';


class GoogleMap extends React.Component {
constructor() {

    this.state = {
        zoom: 13
    }

    this.onMapClicked = this.onMapClicked.bind(this);
    this.test = this.test.bind(this);
}

onMapClicked (props) {
    if (this.state.showingInfoWindow) {
        this.setState({
            showingInfoWindow: false,
            activeMarker: null
        })
    }
}

test(google) {
// Here i tried a lot of ways to get coords somehow
    console.log(google.maps.Map.getBounds())
}

render() {
    const {google} = this.props;

    if (!this.props.loaded) {
        return <div>Loading...</div>
    }

    return (
        <Map className='google-map'
            google={google}
            onClick={this.onMapClicked}
            zoom={this.state.zoom}
            onReady={() => this.test(google)}
            >
        </Map>
        );
    }
}

export default GoogleApiWrapper({
apiKey: (GOOGLE_MAPS_JS_API_KEY)
})(GoogleMap);

Google Maps Api v 3.30.4

dima bgood
  • 108
  • 1
  • 7
  • This worked perfectly for me: https://stackoverflow.com/questions/2832636/google-maps-api-v3-getbounds-is-undefined enjoy it! – Israel Saraiva May 20 '19 at 22:56

1 Answers1

2

You could try and adapt your requirements to the following example here.

From what i can see a reference is returned using the onReady prop.

For example : 

import React from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

const GOOGLE_MAPS_JS_API_KEY='AIzaSyB6whuBhj_notrealkey';


class GoogleMap extends React.Component {
constructor() {

    this.state = {
        zoom: 13
    }

    this.onMapClicked = this.onMapClicked.bind(this);
    this.handleMapMount = this.handleMapMount.bind(this);
}

onMapClicked (props) {
    if (this.state.showingInfoWindow) {
        this.setState({
            showingInfoWindow: false,
            activeMarker: null
        })
    }
}

handleMapMount(mapProps, map) {
    this.map = map;

    //log map bounds
    console.log(this.map.getBounds());
}

render() {
    const {google} = this.props;

    if (!this.props.loaded) {
        return <div>Loading...</div>
    }

    return (
        <Map className='google-map'
            google={google}
            onClick={this.onMapClicked}
            zoom={this.state.zoom}
            onReady={this.handleMapMount}
            >
        </Map>
        );
    }
}

export default GoogleApiWrapper({
apiKey: (GOOGLE_MAPS_JS_API_KEY)
})(GoogleMap);
Daniel Andrei
  • 2,654
  • 15
  • 16
  • Doesn't work in this way( doesn't even call handleMapMount because onMapMounted doesn't trigger anything, onReady prop triggers after map renders, but still I only get an error in console of i try to do it through onReady. I can get this.map with refs, but still doesn't have method getBounds or any other, just all the information about rendered map. [here is some screenshots](http://prntscr.com/gjs2i1) [mb it will help](http://prntscr.com/gjs3pn) – dima bgood Sep 11 '17 at 12:37
  • @dimabgood So the handleMapMount should be changed, i'll update my answer. – Daniel Andrei Sep 11 '17 at 13:02
  • @dimabgood i've updated my answer. you can try it out now. The onReady prop should callback with the mapProps and map object (map being second) – Daniel Andrei Sep 11 '17 at 13:08
  • this.map.getBounds() still undef, i again got a lot of props of this map, but still no api's methods [screenshot](http://prntscr.com/gjsrno) . – dima bgood Sep 11 '17 at 13:32
  • 1
    @dimabgood could you please link a screenshot of the code? Also make sure you have a recent version of the library. – Daniel Andrei Sep 11 '17 at 13:51
  • It works (finally), but only after i added a small timeout, and its pretty funny, shouldn't onReady call method handleMapMount when component is really ready... mb you know the way to make this without timeout?) [screenshot](http://prntscr.com/gjtnh4) – dima bgood Sep 11 '17 at 14:30
  • Ye, here is a [codepen](https://codepen.io/bgood/pen/MEgpae?editors=0010) with hole component – dima bgood Sep 11 '17 at 14:38
  • https://stackoverflow.com/questions/2832636/google-maps-api-v3-getbounds-is-undefined Worked for me!! – Israel Saraiva May 20 '19 at 22:57