React-google-maps: access to the map instance?

Created on 2 Jun 2016  路  7Comments  路  Source: tomchentw/react-google-maps

I want access to the map instance, specifically to call setCenter and setZoom in response to an autocomplete input selection. Is there any way to access it?

I know there are props for zoom/center but I just want to set them once in response to the event and then not manage them.

Most helpful comment

I actually am managing the center myself, but changing the center prop doesn't seem to actually move the map in any way. Not sure if this is a bug, but to workaround this, I would need to call setCenter on the actual map instance and I can't right now...

EDIT: Fixed my issue, as I had to use center, not defaultCenter, which seems to be undocumented. Realized I also want this functionality since I similarly only set it one time and don't want to actually manage the center

All 7 comments

Related to #239

I actually am managing the center myself, but changing the center prop doesn't seem to actually move the map in any way. Not sure if this is a bug, but to workaround this, I would need to call setCenter on the actual map instance and I can't right now...

EDIT: Fixed my issue, as I had to use center, not defaultCenter, which seems to be undocumented. Realized I also want this functionality since I similarly only set it one time and don't want to actually manage the center

Another use case: accessing the map.data property. The current GeoJSON example generates shapes and paths instead of using the built in load/addGeoJson functions. Exposing those properties could make a few things quite a bit easier.

you can do:

<GoogleMap ref={ref => {
    ref.props.map.setCenter(latlng)
}}>

This related to #188 where @nodegin said:

@tomchentw I'm not sure if I was using it in a correct way, I specify a center prop object which contains the initial coordinate, then I modify the center coordinate in a click event which opens a panel, but once I dismiss the panel the map should able for dragging. However, the center variable locks my map movement.

If I use mapRef.panTo then the problem is solved perfectly by just calling it when my panel is being opened, but I don't want the panning animation (since it's causing lag on mobile).

Does anyone get a good solution for this except for setCenter?

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

for the future me or the future developer with my same issue: @agilgur5 solution worked for me, use center instead of defaultCenter.

Was this page helpful?
0 / 5 - 0 ratings