onDragEnd Handler

demo.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Gmaps, Marker} from 'react-gmaps';

const App = React.createClass({

  getInitialState() {
    return {
      open: false,
      lat: 51.5258541,
      lng: -0.08040660000006028
    };
  },

  handleDoubleClick() {
    this.setState({
      open: true,
    });
  },

  handleClick() {
    this.setState({
      open: false,
    });
  },

  handleDragEnd(event) {
    this.setState({
      lat: event.latLng.lat(),
      lng: event.latLng.lng(),
    });
  },

  render() {
    const {open, lat, lng} = this.state;

    return (
      <div onDoubleClick={this.handleDoubleClick}>
        <Gmaps
          width={400}
          height={300}
          lat={lat}
          lng={lng}
          zoom={12}
          disableDoubleClickZoom={true}
        >
          <Marker
            name="1"
            lat={lat}
            lng={lng}
            draggable={true}
            onDragEnd={this.handleDragEnd}
          />
        </Gmaps>
        {open &&
          <div>
            <button onClick={this.handleClick}>X</button>
            <Gmaps
              width={400}
              height={300}
              lat={lat}
              lng={lng}
              zoom={12}
              disableDoubleClickZoom={true}
            >
              <Marker
                name="2"
                lat={lat}
                lng={lng}
                draggable={true}
                onDragEnd={this.handleDragEnd}
              />
            </Gmaps>
          </div>
        }
      </div>
    );
  }

});

ReactDOM.render(<App />, document.getElementById('gmaps'));