Add Markers

demo.js

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

const coords = {
  lat: 51.5258541,
  lng: -0.08040660000006028
};

const Map = React.createClass({

  renderMarkers() {
    const markers = [];
    for (let i = 0; i < this.props.markers; i++) {
      markers.push(
        <Marker
          key={i}
          lat={coords.lat}
          lng={coords.lng -(0.01 * i)}
        />
      );
    }
    return markers;
  },

  render() {
    return (
      <Gmaps
        height={300}
        lat={coords.lat}
        lng={coords.lng}
        ref="gmaps"
        width={400}
        zoom={12}
      >
        {this.renderMarkers()}
      </Gmaps>
    );
  }

});

const App = React.createClass({

  getInitialState() {
    return {
      markers: 0
    };
  },

  handleClick() {
    this.setState({
      markers: ++this.state.markers
    });
  },

  render() {
    return (
      <div>
        <Map markers={this.state.markers} />
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }

});

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