import { GoogleMapLoader, GoogleMap, Marker } from "react-google-maps";

import React from 'react'

var Map = React.createClass({
  render: function() {
    if(this.props.bounds)
      this.googlemap.fitBounds(this.props.bounds)
    return (
      <div className='col-md-10'>
        <section style={{ height: "800px", width: "100%" }}>
          <GoogleMapLoader
            containerElement={
              <div style={{height: "100%"}}/>
            }
            googleMapElement={
              <GoogleMap
                ref={(map) => this.googlemap = map }
                defaultZoom={5}
                defaultCenter={{ lat: 52.49928, lng: 13.44944 }}
                onIdle={this.idle}
              >
                {
                  this.props.records.map((record, index) => {
                    return (
                      <Marker position={{ lat: record.latitude, lng: record.longitude }} key={record.id} />
                    );
                  })
                }
              </GoogleMap>
            }
          />
        </section>
      </div>
    )
  },

  resize: function() {
    // $(ReactDOM.findDOMNode(this)).css 'height', $('html').height() - $(@container).offset().top
    // this.googlemap.event.trigger(@map, "resize")
  },

  idle: function() {
    var ne = this.googlemap.getBounds().getNorthEast()
    var sw = this.googlemap.getBounds().getSouthWest()
    var bb = { nelat: ne.lat(), nelng: ne.lng(), swlat: sw.lat(), swlng: sw.lng() }
    this.props.mapIdle(bb)
  }
});

export default Map


// export default class Map extends Component {

//   state = {
//     markers: [{
//       position: {
//         lat: 25.0112183,
//         lng: 121.52067570000001,
//       },
//       key: `Taiwan`,
//       defaultAnimation: 2,
//     }],
//   }

//   /*
//    * This is called when you click on the map.
//    * Go and try click now.
//    */
//   handleMapClick(event) {
//     let { markers } = this.state;
//     markers = update(markers, {
//       $push: [
//         {
//           position: event.latLng,
//           defaultAnimation: 2,
//           key: Date.now(), // Add a key property for: http://fb.me/react-warning-keys
//         },
//       ],
//     });
//     this.setState({ markers });

//     if (markers.length === 3) {
//       this.props.toast(
//         `Right click on the marker to remove it`,
//         `Also check the code!`
//       );
//     }
//   }

//   handleMarkerRightclick(index, event) {
//     /*
//      * All you modify is data, and the view is driven by data.
//      * This is so called data-driven-development. (And yes, it's now in
//      * web front end and even with google maps API.)
//      */
//     let { markers } = this.state;
//     markers = update(markers, {
//       $splice: [
//         [index, 1],
//       ],
//     });
//     this.setState({ markers });
//   }

//   renderNewBehavior() {
//     return (
//       <ScriptjsLoader
//         hostname={"maps.googleapis.com"}
//         pathname={"/maps/api/js"}
//         query={{ v: `3.${ AsyncGettingStarted.version }`, libraries: `geometry,drawing,places` }}
//         loadingElement={
//           <div {...this.props} style={{ height: `100%` }}>
//             <FaSpinner
//               style={{
//                 display: `block`,
//                 width: 200,
//                 height: 200,
//                 margin: `100px auto`,
//                 animation: `fa-spin 2s infinite linear`,
//               }}
//             />
//           </div>
//         }
//         containerElement={
//           <div {...this.props} style={{ height: `100%` }} />
//         }
//         googleMapElement={
//           <GoogleMap
//             ref={googleMap => {
//               if (!googleMap) {
//                 return;
//               }
//               console.log(googleMap);
//               console.log(`Zoom: ${ googleMap.getZoom() }`);
//               console.log(`Center: ${ googleMap.getCenter() }`);
//             }}
//             defaultZoom={3}
//             defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
//             onClick={::this.handleMapClick}
//           >
//             {this.state.markers.map((marker, index) => {
//               return (
//                 <Marker
//                   {...marker}
//                   onRightclick={this.handleMarkerRightclick.bind(this, index)}
//                 />
//               );
//             })}
//           </GoogleMap>
//         }
//       />
//     );
//   }

//   render() {
//     return this.renderNewBehavior();
//   }
// }

@@ -1536,3061 +1536,4 @@
 Map%0A
-%0A%0A// export default class Map extends Component %7B%0A%0A//   state = %7B%0A//     markers: %5B%7B%0A//       position: %7B%0A//         lat: 25.0112183,%0A//         lng: 121.52067570000001,%0A//       %7D,%0A//       key: %60Taiwan%60,%0A//       defaultAnimation: 2,%0A//     %7D%5D,%0A//   %7D%0A%0A//   /*%0A//    * This is called when you click on the map.%0A//    * Go and try click now.%0A//    */%0A//   handleMapClick(event) %7B%0A//     let %7B markers %7D = this.state;%0A//     markers = update(markers, %7B%0A//       $push: %5B%0A//         %7B%0A//           position: event.latLng,%0A//           defaultAnimation: 2,%0A//           key: Date.now(), // Add a key property for: http://fb.me/react-warning-keys%0A//         %7D,%0A//       %5D,%0A//     %7D);%0A//     this.setState(%7B markers %7D);%0A%0A//     if (markers.length === 3) %7B%0A//       this.props.toast(%0A//         %60Right click on the marker to remove it%60,%0A//         %60Also check the code!%60%0A//       );%0A//     %7D%0A//   %7D%0A%0A//   handleMarkerRightclick(index, event) %7B%0A//     /*%0A//      * All you modify is data, and the view is driven by data.%0A//      * This is so called data-driven-development. (And yes, it's now in%0A//      * web front end and even with google maps API.)%0A//      */%0A//     let %7B markers %7D = this.state;%0A//     markers = update(markers, %7B%0A//       $splice: %5B%0A//         %5Bindex, 1%5D,%0A//       %5D,%0A//     %7D);%0A//     this.setState(%7B markers %7D);%0A//   %7D%0A%0A//   renderNewBehavior() %7B%0A//     return (%0A//       %3CScriptjsLoader%0A//         hostname=%7B%22maps.googleapis.com%22%7D%0A//         pathname=%7B%22/maps/api/js%22%7D%0A//         query=%7B%7B v: %603.$%7B AsyncGettingStarted.version %7D%60, libraries: %60geometry,drawing,places%60 %7D%7D%0A//         loadingElement=%7B%0A//           %3Cdiv %7B...this.props%7D style=%7B%7B height: %60100%25%60 %7D%7D%3E%0A//             %3CFaSpinner%0A//               style=%7B%7B%0A//                 display: %60block%60,%0A//                 width: 200,%0A//                 height: 200,%0A//                 margin: %60100px auto%60,%0A//                 animation: %60fa-spin 2s infinite linear%60,%0A//               %7D%7D%0A//             /%3E%0A//           %3C/div%3E%0A//         %7D%0A//         containerElement=%7B%0A//           %3Cdiv %7B...this.props%7D style=%7B%7B height: %60100%25%60 %7D%7D /%3E%0A//         %7D%0A//         googleMapElement=%7B%0A//           %3CGoogleMap%0A//             ref=%7BgoogleMap =%3E %7B%0A//               if (!googleMap) %7B%0A//                 return;%0A//               %7D%0A//               console.log(googleMap);%0A//               console.log(%60Zoom: $%7B googleMap.getZoom() %7D%60);%0A//               console.log(%60Center: $%7B googleMap.getCenter() %7D%60);%0A//             %7D%7D%0A//             defaultZoom=%7B3%7D%0A//             defaultCenter=%7B%7B lat: -25.363882, lng: 131.044922 %7D%7D%0A//             onClick=%7B::this.handleMapClick%7D%0A//           %3E%0A//             %7Bthis.state.markers.map((marker, index) =%3E %7B%0A//               return (%0A//                 %3CMarker%0A//                   %7B...marker%7D%0A//                   onRightclick=%7Bthis.handleMarkerRightclick.bind(this, index)%7D%0A//                 /%3E%0A//               );%0A//             %7D)%7D%0A//           %3C/GoogleMap%3E%0A//         %7D%0A//       /%3E%0A//     );%0A//   %7D%0A%0A//   render() %7B%0A//     return this.renderNewBehavior();%0A//   %7D%0A// %7D%0A

Remove old map code