React-google-maps: How can i center map to again the default position lat and lng dynamcaly

[ShintaroNippon]

I have this code

import React from "react";
import ReactDOM from "react-dom";
import { compose, withProps } from "recompose";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  Circle
} from "react-google-maps";
import config from 'config';

const GoogleMaps = compose(
  withProps({
    /**
     * Note: create and replace your own key in the Google console.
     * https://console.developers.google.com/apis/dashboard
     * The key "AIzaSyBkNaAGLEVq0YLQMi-PYEMabFeREadYe1Q" can be ONLY used in this sandbox (no forked).
     */
    googleMapURL:
      "https://maps.googleapis.com/maps/api/js?key=" + config.googlemaps + "v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `300px` }} />,
    mapElement: <div style={{ height: `100%` }} />
  }),
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap defaultZoom={8} defaultCenter={new google.maps.LatLng(props.lat,  props.lng)}>
    {props.isMarkerShown && (
      <Marker position={{ lat: props.lat, lng: props.lng }} />
    )}
     {props.isCircle && (
      <Circle radius={10000}  visible={true} center={{ lat: props.lat, lng: props.lng }}/>
     )}
    </GoogleMap>
));

export { GoogleMaps };

after i have change the lat and lng props the element map stays on first position
how to center it to the marker ?

Many thanks
Carlos Vieira

[ShintaroNippon]

Solution found...

center={new google.maps.LatLng(props.lat, props.lng)}

thanks
Carlos Vieira

[bognix]

But with this solution don't you need to change the center every time user drags a map? I tried this approach (with setting center instead of defaultCenter) but I wasn't satisfied with the solution because it wasn't working well with drag event. Even though I updated the center on every dragend event

[ryan-ds]

@bognix Can you please provide an example of how you updated the center on every dragend event?

[akhilmr95]

@ryan-ds Please follow the below steps to update the center on every drag end:-
1)Create a ref to the map and pass it as a prop to GoogleMap component.
2)Now create a handler for map drag as shown below:-
handleOnMapDrag(event) {
var dragLat = this._map.getCenter().lat(); //this._map is a ref to GoogleMap component created in step 1 above.
var dragLng = this._map.getCenter().lng();
}
Update your lat and lng states with dragLat and dragLng so that it will update the center on every dragend.
3)Pass this drag handler to onDragEnd prop to GoogleMap component.

You are all set now. Try out and let me know..!!

[abhisekp]

@ShintaroNippon where did you import the google from? i.e. new google.maps

_EDIT: Looks like it is global_

[vmobeedeveloper]

@ShintaroNippon 100% worked this solution (If Radius not update)
**center**={{
lat: item.lat,
lng: item.lng
}}
radius={2000}
visible={true}
options={{ strokeColor: "#ff0000" }}
/>