React-google-maps: Keep marker centered and move map around it

Created on 15 Dec 2017 · 6Comments · Source: tomchentw/react-google-maps

How do I keep the marker centered of the map, while dragging the map around the marker? Like how Uber does it, when a user is trying to choose a location. Any ideas?

Source

asonni

Most helpful comment

@neilyoung Thanks for the idea

I found this function in GoogleMap prop onBoundsChanged
const onBoundsChanged = () => { this.setState({ bounds: refs.map.getBounds(), center: refs.map.getCenter() }); }

And then I changed Marker position props
<Marker position={this.state.center} />

asonni on 25 Dec 2017

❤1 🎉1

All 6 comments

@asonni You need to alter the center prop of your map whenever the position changes

<GoogleMap defaultZoom={18} center={{lat: props.latitude || 0, lng: props.longitude || 0}} defaultCenter={{ lat: 0, lon: 0 }}> 
</GoogleMap>

neilyoung on 18 Dec 2017

@neilyoung Thanks for the idea

I found this function in GoogleMap prop onBoundsChanged
const onBoundsChanged = () => { this.setState({ bounds: refs.map.getBounds(), center: refs.map.getCenter() }); }

And then I changed Marker position props
<Marker position={this.state.center} />

asonni on 25 Dec 2017

❤1 🎉1

@asonni Ah, ok. You come from the other side, you change bounds or pan the map and you want to keep you maker always centered. In that scenario your solution works better. In my case I'm moving the marker and keep the map centered around. However, I guess, both solutions could coexist.

neilyoung on 25 Dec 2017

👍1

I just overlay the map with a div and and icon positioned at the center.