score:1

default properties like defaultcenter could only be set as initial state, center property could be used instead to re-render (center) the map.

the following example demonstrates how to center the map based on current location

class app extends react.component {
  constructor(props) {
    super(props)
    this.state = {
      currentlatlng: {
        lat: 0,
        lng: 0
      },
      ismarkershown: false
    }
  }

  showcurrentlocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getcurrentposition(
        position => {
          this.setstate(prevstate => ({
            currentlatlng: {
              ...prevstate.currentlatlng,
              lat: position.coords.latitude,
              lng: position.coords.longitude
            },
            ismarkershown: true
          }))
        }
      )
    } else {
      error => console.log(error)
    }
  }


  componentdidmount() {
    this.showcurrentlocation()
  }

  render() {
    return (
      <div>
        <mapwithamarker
          ismarkershown={this.state.ismarkershown}
          currentlocation={this.state.currentlatlng} />
      </div>
    );
  }
}

where

const mapwithamarker = compose(
    withprops({
        googlemapurl: "https://maps.googleapis.com/maps/api/js",
        loadingelement: <div style={{ height: `100%` }} />,
        containerelement: <div style={{ height: `400px` }} />,
        mapelement: <div style={{ height: `100%` }} />,
    }),
    withscriptjs,
    withgooglemap
)((props) =>
    <googlemap
        defaultzoom={8}
        center={{ lat: props.currentlocation.lat, lng: props.currentlocation.lng }}
    >
        {props.ismarkershown && <marker position={{ lat: props.currentlocation.lat, lng: props.currentlocation.lng }} onclick={props.onmarkerclick} />}
    </googlemap>
)

demo (edit)


Related Query

More Query from same tag