Google-maps-react: How can i set a marker always at the map's center?

[jchavezjs]

I want to put a marker at the center of the map and make it stay there after dragging, as the marker did not move at all, like Uber does. This is my code.

export class MapContainer extends Component {
render() {
    return (
      <Map
        google={this.props.google}
        mapTypeControl={false}
        zoomControl={false}
        gestureHandling="greedy"
        zoom={15}
        center={this.props.center}
        onDragend={this.props.onCenterChanged}
      >
        <Marker name={'Current location'} position={this.props.center} />
      </Map>
    );
  }
}

And the function in a parent component

handleCenterChanged(mapProps, map) {
    console.log(map);
    const newCenter = {lat: map.center.lat(), lng: map.center.lng()};
    const newMarker = update(this.state.markers, {
      position: {
        lat: { $set: newCenter.lat },
        lng: { $set: newCenter.lng },
      },
    });
    this.setState({ markers: newMarker, center: newMarker.position });
  }

With this, the marker moves to the center so bad. It seems with a big delay. If anyone could help me i´ll be grateful :)

[ninahaack]

Did you try to use initialCenter in the map component?

[serranoarevalo]

I'm cloning uber as well and the way I solved this wasn't putting a marker on the center, I actually render the map component and an image component separately on the center of the screen and when people drag the map I just call map.getCenter() which will give you the address where the centered image is.