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

const App = React.createClass({

  onMapCreated(map) {
    const flightPlanCoordinates = [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 },
    ];

    const flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2,
    });

    flightPath.setMap(map);
  },

  render() {
    return (
      <Gmaps
        height={300}
        lat={37.772}
        lng={-122.214}
        onMapCreated={this.onMapCreated}
        width={400}
        zoom={1}
      />
    );
  },

});

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