text: /* global google */
  import _ from "lodash";
  
  import {
    default as React,
    Component,
  } from "react";
  
  import Helmet from "react-helmet";
  import {
    withGoogleMap,
    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
   */
  const GettingStartedGoogleMap = withGoogleMap(props => (
    <GoogleMap
      ref={props.onMapLoad}
      defaultZoom={12}
      //14.5874420000,120.9879920000
      defaultCenter={{ lat: 14.5874420000, lng: 120.9879920000 }}
      onClick={props.onMapClick}
    >
      {props.markers.map(marker => (
        <Marker
          {...marker}
          onRightClick={() => props.onMarkerRightClick(marker)}
        />
      ))}
    </GoogleMap>
  ));
  
  export default class GettingStartedExample extends Component {
  
    state = {
      markers: [{
        position: {
          lat: 14.451950,
          lng: 120.925871,
        },
        key: `Phili`,
        defaultAnimation: 2,
      }],
    };
  
    handleMapLoad = this.handleMapLoad.bind(this);
    handleMapClick = this.handleMapClick.bind(this);
    handleMarkerRightClick = this.handleMarkerRightClick.bind(this);
  
    handleMapLoad(map) {
      this._mapComponent = map;
      if (map) {
        console.log(map.getZoom());
      }
    }
  
    /*
     * This is called when you click on the map.
     * Go and try click now.
     */
    handleMapClick(event) {
      const nextMarkers = [
        ...this.state.markers,
        {
          position: event.latLng,
          defaultAnimation: 2,
          key: Date.now(), // Add a key property for: http://fb.me/react-warning-keys
        },
      ];
      this.setState({
        markers: nextMarkers,
      });
  
  
    }
  
    handleMarkerRightClick(targetMarker) {
      /*
       * 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.)
       */
      const nextMarkers = this.state.markers.filter(marker => marker !== targetMarker);
      this.setState({
        markers: nextMarkers,
      });
    }
  
    render() {
      console.log('render google map %s',  window.innerHeight)
      let containerHeight = window.innerHeight-64;
      return (
        <div style={{height: `${containerHeight}px`}}>
  
  
          <GettingStartedGoogleMap
            containerElement={
              <div id='cid'  style={{ height: `100%` }} />
            }
            mapElement={
              <div   style={{ height: `100%` }} />
            }
            onMapLoad={this.handleMapLoad}
            onMapClick={this.handleMapClick}
            markers={this.state.markers}
            onMarkerRightClick={this.handleMarkerRightClick}
          />
        </div>
      );
    }
  }
  