React-google-maps: use getCenter function and others

[alex-brain]

How can I use getCenter?
I try
defaultZoom={14}
center={{lat: props.mapCenter.lat, lng: props.mapCenter.lng}}
onCenterChanged={getCenter()}
>
But I get message getCenter is undefined

[tomchentw]

Please refer to Getting Help section in the README (or #469).

[DavidVaini]

you would figure basic usage would be covered under the documentation. There seems to be no mention of the switch from refs to whatever it currently uses:
In the change log it doesnt mention the change from ref="map" to ref={props.onMapLoad}

considering all previous ways of calling functions like getCenter() used ref.map.getCenter() it breaks existing code. Then when you try to set the ref, you get "Stateless function components cannot have refs."

so they got rid of refs entirely? This question has been asked on stackoverflow but considering there is no documentation for this change, there is no good answer yet on how to do basic map handling. I will be digging through the source code to figure it out... ugh.

[tomchentw]

Breaking change in 6.0.0.
https://github.com/tomchentw/react-google-maps/blob/master/CHANGELOG.md#600-2016-10-04
On Wed, Apr 26, 2017 at 12:56 AM David Vaini [e-mail]
wrote:

you would figure basic usage would be covered under the documentation.
There seems to be no mention of the switch from refs to whatever it
currently uses:
In the change log it doesnt mention the change from ref="map" to
ref={props.onMapLoad}

considering all previous ways of calling functions like getCenter() used
ref.map.getCenter() it breaks existing code. Then when you try to set the
ref, you get "Stateless function components cannot have refs."

so they got rid of refs entirely? This question has been asked on
stackoverflow but considering there is no documentation for this change,
there is no good answer yet on how to do basic map handling. I will be
digging through the source code to figure it out... ugh.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/tomchentw/react-google-maps/issues/466#issuecomment-297094733,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA4SemMPtg4lP01eJ9lPyRa9cfjvXukhks5rziW_gaJpZM4NBX9n
.

[DavidVaini]

Sure, I see that line change, but it doesnt mention the Ref's and how calling the refs are broken. Typically with broken changes, you specify the new way of handling it. So whats the new way of handling this.refs.map.getBounds(); ?

[tomchentw]

It's defined in the public method of the <GoogleMap> component. So get the ref and call getBounds
https://github.com/tomchentw/react-google-maps/blob/master/src/lib/GoogleMap.js#L97

[jkranking]

Can anyone explain how to properly access the refs and how to subsequently call a function off of it per DavidVaini's question above?

[Y-Taras]

here's a nice example from official documentation
https://tomchentw.github.io/react-google-maps/places/search-box

[Pegahkeshavarz]

none of these examples are working?

[tomchentw]

@Pegahkeshavarz https://tomchentw.github.io/react-google-maps/#searchbox

[Pegahkeshavarz]

I am trying to get the center info by clicking on a button but when using this.refs.map.getCenter() i am getting the error of can not find property getCenter of undefined?

[tomchentw]

You need to store ref in some way so that they can access it later.

[Darksoulsong]

This is how I'm trying to use getCenter using a ref, and it's not working.

const Map = withScriptjs(
  withGoogleMap(() => {
    const ref: any = useRef<HTMLElement>(null);

    return (
      <GoogleMap
        options={{
          styles: mapOptions.styles,
          scrollwheel: mapOptions.scrollwheel
        }}
        defaultZoom={mapOptions.zoom}
        defaultCenter={{ lat: -26.896333, lng: -49.23524 }}
        ref={ref}
      >
        <Marker position={ref.current.getCenter()} />
      </GoogleMap>
    );
  })
);

[JustFly1984]

@Darksoulsong this repo is unmaintained more than a year, please refer to npm @react-google-maps/api