import {default as React, Component} from "react";
import {default as update} from "react-addons-update";

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

/*
 * This is the modify version of:
 * https://developers.google.com/maps/documentation/javascript/examples/event-arguments
 *
 * Add <script src="https://maps.googleapis.com/maps/api/js"></script> to your HTML to provide google.maps reference
 */
export default class GettingStarted 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) {
    var {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 (3 === markers.length) {
      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.)
     */
    var {markers} = this.state;
    markers = update(markers, {
      $splice: [
        [index, 1]
      ],
    });
    this.setState({ markers });
  }

  render () {
    return (
      <GoogleMap containerProps={{
          ...this.props,
          style: {
            height: "100%",
          },
        }}
        ref="map"
        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>
    );
  }
}

@@ -108,16 +108,33 @@
 import %7B
+GoogleMapLoader, 
 GoogleMa
@@ -1661,16 +1661,30 @@
 oogleMap
+Loader%0A       
  contain
@@ -1689,15 +1689,16 @@
 iner
-Props=%7B
+Element=
 %7B%0A  
@@ -1705,16 +1705,34 @@
         
+%3Cdiv%0A            %7B
 ...this.
@@ -1736,18 +1736,19 @@
 is.props
-,%0A
+%7D%0A 
         
@@ -1753,17 +1753,20 @@
     
+ 
 style
-: %7B%0A
+=%7B%7B%0A  
     
@@ -1803,30 +1803,95 @@
     
-%7D,%0A        %7D%7D%0A
+  %7D%7D%0A          /%3E%0A        %7D%0A        googleMapElement=%7B%0A          %3CGoogleMap%0A   
         
 ref=
@@ -1890,18 +1890,62 @@
     
+ 
 ref=
-%22map%22%0A
+%7B(map) =%3E map && console.log(map.getZoom())%7D%0A    
     
@@ -1968,24 +1968,28 @@
 %7B3%7D%0A        
+  
+  
 defaultCente
@@ -2035,16 +2035,20 @@
         
+    
 onClick=
@@ -2080,16 +2080,20 @@
         
+  
+  
 %7Bthis.st
@@ -2135,24 +2135,28 @@
 %7B%0A          
+    
 return (%0A   
@@ -2168,16 +2168,20 @@
     
+ 
+   
 %3CMarker%0A
     
@@ -2176,16 +2176,20 @@
 %3CMarker%0A
+    
         
@@ -2206,16 +2206,20 @@
 marker%7D%0A
+    
         
@@ -2294,27 +2294,35 @@
 %3E%0A          
+   
+ 
 );%0A
+    
         %7D)%7D%0A
@@ -2327,16 +2327,20 @@
 %7D%0A      
+  
+  
 %3C/Google
@@ -2344,16 +2344,35 @@
 gleMap%3E%0A
+        %7D%0A      /%3E%0A
     );%0A 

update to GoogleMapLoader