Google-maps-react: How do I use mapCenter?

[colshacol]

I'm having a terrible time getting my map to center, and I am assuming that I have misunderstood and this is not how the mapCenter prop is meant to be used. Can anybody point me in the right direction here?

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import style from './Home.styl'
import axios from 'axios'

// import _ from '../../stores/_Store'
// import _ from '../../stores/_Store'
// import _ from '../../stores/_Store'

import Map, { Marker } from 'google-maps-react'

@observer class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  componentWillMount() {}
  componentDidMount() {}
  componentWillUpdate() {}
  componentDidUpdate() {}

  render() {
    return(
      <div className="Home">
        <div id="googleMap">
          <Map google={window.google} mapCenter={{lat: 32.4331976, lng: -97.7828788}}>
            <Marker
              name={'Place One'}
              position={{lat: 32.4331976, lng: -97.7828788}}
            />
          </Map>
        </div>
      </div>
    )
  }
}

export default Home

[coreyar]

The Map component is defined in index.js.

To define the center for the initial rendering use the prop initialCenter. This is defined the components constructor.

 this.state = {
          currentLocation: {
            lat: this.props.initialCenter.lat,
            lng: this.props.initialCenter.lng
          }
        }

You can also see under componentDidUpdate that the prop to recenter the map is center.

 componentDidUpdate(prevProps, prevState) {
     ...
      if (this.props.center !== prevProps.center) {
        this.setState({
          currentLocation: this.props.center
        })
      }
      ...

    }

Hope that helps.

[kevinSuttle]

Example:

 <Map google={window.google}
            initialCenter={{
              lat: 48.61021668181817,
              lng: 9.103665540909093
            }}

[rojobuffalo]

What is the use case for mapCenter? In ./README.md#L128, the mapCenter prop is listed under the heading "Subcomponents". As far as I can tell it's not meant to be a component or element--but rather is intended to be a parameter for latitude and longitude. Should we document it as a regular prop rather than a subcomponent? When is mapCenter meant to be used? Should we also document the initialCenter prop?

[416serg]

@rojobuffalo I am with you on this one. It would be awesome to have the mapCenter be updated every time the map changes state (ie: onDrag) so that the child components can benefit from that change dynamically. I am looking to set this up so that in my child list of Map, I am going to have a bunch of Markers and I want to update which ones get displayed based on the radius from mapCenter