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

const App = React.createClass({

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

  handleIdle() {
    if (!this.state.loaded) {
      console.log('do something only the first time the map is loaded');

      this.setState({
        loaded: true,
      });
    }
  },

  render() {
    return (
      <div style={{ visibility: !this.state.loaded && 'hidden' }}>
        <Gmaps
          height={300}
          lat={51.5258541}
          lng={-0.08040660000006028}
          onIdle={this.handleIdle}
          width={400}
          zoom={12}
        />
      </div>
    );
  }

});

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