MicheleBertoli / react-gmaps

A Google Maps component for React.js

Home Page:http://react-gmaps.herokuapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Events on dragEnd and dragStart is not being injected

nschurmann opened this issue · comments

Hello!, i have this class:

export default class Maps extends React.Component {

  constructor(props) {
    super(props)
    this.updateCoordinates = this.props.updateCoordinates
    this.updateAddress = this.props.updateAddress
  }

  dragStart(e) {
    console.log(e)
    document.getElementsByClassName('pin')[0].className = 'pin float'
  }

  dragEnd(e) {
    console.log(e)
    this.updateCoordinates([e.center.lng(), e.center.lat()])
    fetch(`http://maps.googleapis.com/maps/api/geocode/json?latlng=${e.center.lat()},${e.center.lng()}&sensor=true`)
      .then(x => x.json()).then(x => {
        const { formatted_address } = x.results[0]
        this.updateAddress(formatted_address)
      })
    document.getElementsByClassName('pin')[0].className = 'pin'
  }

  render() {
    return (
      <div>
        <Spinner />
        <div style={{ top: '-240px', position: 'relative', marginBottom: '-240px' }}>
          <Gmaps
            scrollWheel={false}
            width={'364px'}
            height={'240px'}
            lat={51.5258541}
            lng={-0.08040660000006028}
            zoom={16}
            styles={morhan}
            loadingMessage={'Be happy'}
            onDragStart={this.dragStart}
            onDragEnd={this.dragEnd}
            onMapCreated={this.onMapCreated} />
          <div style={{ position: 'relative', top: '-125px' }} id="pin"><div className="pulse"></div><div className="pin"><i className="fa fa-plane" aria-hidden="true"></i></div></div>
        </div>
      </div>
    )
  }
}

the dragEnd and dragStart methods are not receiving the E argument. I need to get the latutide and longitude after a dragEnd, how can i get that?

Hello @nschurmann, the dragstart and dragend events do not receive any arguments:
https://developers.google.com/maps/documentation/javascript/3.exp/reference

screen shot 2017-05-17 at 4 51 44 pm

If you need to get the center of the map when a drag ends, you can store the map reference that you receive from onMapCreated and then call map.getCenter().
Hope this helps.

It actually did help!, thanks!