es6 google map react component

mapReactEs6.jsx

'use strict';

import React from 'react/addons';
import ReactGoogleMaps, {Map, Marker} from 'react-googlemaps';

const GoogleMapsAPI = window.google.maps;
const LatLng = GoogleMapsAPI.LatLng;

export default class Gmap extends React.Component{
  constructor() {
    super();
    this.state = {
      center: new LatLng(-34.397, 150.644),
      zoom: 12,
      markers: [
        {position: new LatLng(-34.397, 150.644)},
        {position: new LatLng(-34.500, 150.644)}
      ]
    }

    this.handleMapClick = this.handleMapClick.bind(this)
    this.handleCenterChange = this.handleCenterChange.bind(this)
  }

  renderMarkers(markerState, i) {
    return <Marker position={markerState.position} key={i} />
  }

  handleMapClick(mapEvent) {
    let marker = {
      position: mapEvent.latLng
    };

    let markers = React.addons
      .update(this.state.markers, {$push: [marker]});

    this.setState({
      markers: markers,
      center: mapEvent.latLng
    });
  }

  handleCenterChange(map) {
    this.setState({
      center: map.getCenter()
    });
  }

  render() {
    return <Map
        initialZoom={this.state.zoom}
        center={this.state.center}
        onCenterChange={this.handleCenterChange}
        width={700}
        height={700}
        onClick={this.handleMapClick}>
        {this.state.markers.map(this.renderMarkers)}
      </Map>
  }

}