Gmaps Marker Icons

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 App = React.createClass({

  getInitialState() {
    return {
      ready: false,
    };
  },

  handleMapCreated() {
    this.setState({
      ready: true,
    });
  },

  render() {
    return (
      <Gmaps
        height={300}
        lat={coords.lat}
        lng={coords.lng}
        width={400}
        zoom={12}
        onMapCreated={this.handleMapCreated}
      >
        <Marker
          icon={this.state.ready ? {
            path: google.maps.SymbolPath.CIRCLE,
            strokeColor: '#FF0000',
            fillColor: '#FF0000',
            fillOpacity: 0.8,
            scale: 5
          } : null}
          lat={coords.lat + 0.01}
          lng={coords.lng}
        />
        <Marker
          icon="http://maps.google.com/mapfiles/ms/icons/green-dot.png"
          lat={coords.lat - 0.01}
          lng={coords.lng}
        />
      </Gmaps>
    );
  }

});

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