getting a handle on the map without using recompose

[tschams]

How can this be done? I am trying to fetch using places API and I am unable to get a handle on the map to get the bounds

[xiankai]

recompose is just a convenient wrapper for the decorator syntax. See Step 4 of https://tomchentw.github.io/react-google-maps/#usage--configuration for an example comparison of code without recompose.

#636 (comment) may also be relevant.

[tschams]

Thank you for responding! I saw all that. I am trying to access the map from the MyMapComponent, like the problems it seems everyone else had. The following is my code:
/global google/
import React from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";

const MyMapComponent = withScriptjs(withGoogleMap(props =>
return <GoogleMap
defaultZoom={8}
defaultCenter={{ lat: -34.397, lng: 150.644 }}
/* ref={(map) => (this._googleMapComponent = map) && console.log(this._googleMapComponent) } */
>

}))

class MapComponent extends React.PureComponent {
constructor(props) {
super(props);
this.state = { map: undefined };
}

 onMapMounted = ref => {
     this.state.map = ref;
 }

fetchPlaces = () => {
    const bounds = this.state.map.getBounds();
    const service = new google.maps.places.PlacesService(this.state.map.context.MAP);
    const request = {
        bounds: bounds,
        type: 'hotel'
    };
    service.nearbySearch(request, (results, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            console.log(results);
        }
    })
}

render() {
    return (
        <MyMapComponent
            googleMapURL="https://maps.googleapis.com/maps/api/js?key=myKey&libraries=geometry,drawing,places"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `462px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
            //ref={this.onMapMounted}
            fetchPlaces={this.fetchPlaces}
        />
    )
}

}

export default MapComponent;

[xiankai]

Your code looks fine to me barring 2 syntax errors - an opening bracket {and a closing JSX tag /> for MyMapComponent.

[tschams]

Thank you for responding! That was not the issue. Currently after changing my code I am referencing the map, however my current issue is that I am not getting a new center after dragging the map. Here is my code:
/global google/
import React from "react";
import { withScriptjs, withGoogleMap, GoogleMap } from "react-google-maps";

export default class MapComponent extends React.Component {
constructor(props) {
super(props);
this.state = { map: null };
}
mapLoaded(map) {
//console.log('mapLoaded: ' + JSON.stringify(map.getCenter()))
if(this.state.map !== null)
return
this.setState({map: map})
}

    mapMoved() {
        console.log('mapMoved: ' + JSON.stringify(this.state.map.getCenter()))
    }

    zoomChanged() {
        console.log(this.state.map.getZoom())
    }

render() {
    const MyMapComponent = withScriptjs(withGoogleMap(props => {
        // let ref = {};
        return <GoogleMap
            onIdle = {this.mapMoved.bind(this)}
            defaultZoom={8}
            defaultCenter={{ lat: -34.397, lng: 150.644 }}
            ref = {this.mapLoaded.bind(this)}
            onZoomChanged= {this.zoomChanged.bind(this)}
        >
        </GoogleMap>
    }))

    return (
        <MyMapComponent
            googleMapURL="https://maps.googleapis.com/maps/api/js?key=myKey&libraries=geometry,drawing,places"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `462px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
        />
    )
}

}

[josalvmo]

try this:

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

export default class GoogleMapBox extends React.Component {

state = { 
    map: undefined 
};

mapLoaded(ref) {
    this.state.map = ref;
}

mapMoved() {
    console.log('mapMoved: ' + JSON.stringify(this.state.map.getCenter()))
}

zoomChanged() {
    console.log(this.state.map.getZoom())
}

render() {
        const MyMapComponent = withScriptjs(withGoogleMap(props => {
            // let ref = {};
            return <GoogleMap
                onIdle = {this.mapMoved.bind(this)}
                defaultZoom={8}
                defaultCenter={{ lat: -34.397, lng: 150.644 }}
                ref = {this.mapLoaded.bind(this)}
                onZoomChanged= {this.zoomChanged.bind(this)}
            >
            </GoogleMap>
        }))

        return (
            <MyMapComponent
                googleMapURL="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=geometry,drawing,places" //"https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={<div style={{ height: `100%` }} />}
                mapElement={<div style={{ height: `100%` }} />}
            />
        )
}

}