Use react-google-maps methods with recompose

Question

I'm using react google maps for fine tuning the user location after a geo location function, this is part of my Map.js code:

    const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyAKCqAqiyop85LNl9qUb6OAT1lJupLEnzo&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{height: `100%`}}/>,
    containerElement: <div style={{height: `400px`}}/>,
    mapElement: <div style={{height: `100%`}}/>,
  }),
  withState(),
  withHandlers(() => {
    const refs = {
      map: undefined,
    }

    return {
      onMapMounted: () => ref => {
        refs.map = ref
      },
      onBoundsChanged: ({onBoundsChanged}) => () => {
        onBoundsChanged(refs.map.getCenter().lat(), refs.map.getCenter().lng())
      }
    }
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{lat: props.lat, lng: props.lng}}
    ref={props.onMapMounted}
    onBoundsChanged={props.onBoundsChanged}
  >
    <Marker position={{lat: props.lat, lng: props.lng}}/>
  </GoogleMap>
)

I just want to be able to call the panTo() method in other component via ref, internally i have no problem cause i think the ref passes fine in the mapMounted method ( refs.map.getCenter().lat() ), but how to call thee methods externally, my prob is that im using recompose library. thx in advance.

part of the code in Home.js where i use map and have the get position method that i want to trigger panTo():

import MyMapComponent from './Maps';
export default class HomeComponent extends React.Component {

render() {
 const {showAlert, address, lat, lng} = this.props;
 return (
          <MyMapComponent
            lat={lat}
            lng={lng}
            onBoundsChanged={this.props.handleOnBoundsChanged}
          />
          <Button onClick={()=>this.props.getPosition()}>Usar mi 
                   ubicación actual</Button>
        )
    }
  }

you can still pass computed prop to `GoogleMap` then use it with panTo in any of the event handler — Sakhi Mansoor, Aug 29 '18 at 20:22
I'm a newcomer in react, I'm struggling on how to make an event handler and call it, if you could help. Me with an code example I'll Thank you so much — BetoCuevas, Aug 29 '18 at 21:15
Listen can you tell me when do you want to call panTo () ? what is the use case — Sakhi Mansoor, Aug 29 '18 at 21:16
I use a getGeolocation function, then draw a marker in the map so after that i wnt to pan the map to that new position obtained by the getGeolocation function, so basically i need a way to call that function with new lat lng parameters, hope i explainned myself, and thanks in advance for your time @sak — BetoCuevas, Aug 29 '18 at 22:19
In other component, i have Map.js with the code i posted, then i import it in Home.js component, and pass some default lat lng props, so when i press a button in Home.js component i could pass the new lat lng props and then eventually call the Map.js component panTo() method with that new location. i could do it in vanilla js but here im using recompose and obvously react — BetoCuevas, Aug 29 '18 at 23:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/179064/discussion-between-larvex-and-sakhi-mansoor). — BetoCuevas, Aug 29 '18 at 23:14

score 0 · Answer 1 · answered Aug 29 '18 at 23:15

You can create a prop out of any of the map methods.

...

withHandlers(() => {
  let map;
  return {
    onMapMounted: () => ref => {
      map = ref;
    },

    onBoundsChanged: ({ onBoundsChanged }) => () => {
      onBoundsChanged(map.getCenter().lat(), map.getCenter().lng());
    }

    mapPanTo: () => args => map.panTo(args),
  };
})

...

Now props.mapPanTo can be passed around to any other component.

Use react-google-maps methods with recompose

1 Answers1