import  React,{Component} from "react";
import {connect} from 'react-redux';
import _ from 'lodash';
import {withGoogleMap,GoogleMap,DirectionsRenderer} from "react-google-maps";
import TaxiMarker from '../components/marker';

/*
 * Sample From: https://developers.google.com/maps/documentation/javascript/examples/map-simple
 */
const SimpleMapExampleGoogleMap = withGoogleMap(props => (
  <GoogleMap
    defaultZoom={12}
    defaultCenter={{ lat: props.lat, lng: props.lng}}
  >
    {props.markers}
    {props.directions && <DirectionsRenderer directions={props.directions} />}
  </GoogleMap>
));

/*
 * Add <script src="https://maps.googleapis.com/maps/api/js"></script> to your HTML to provide google.maps reference
 */
class SimpleMapExample extends Component {

  renderMarkers(){
    return _.map(this.props.taxiInfo,(driver) => {
      // console.log("DriverMapping:",driver);
      return(
        <TaxiMarker
          key = {driver.DriverId}
          lat = {driver.latitude}
          lng = {driver.longitude}
        />
      );
    });
  }

  // renderMarkers(){
  //   return (
  //       <TaxiMarker
  //         lat = {25.0429295}
  //         lng = {121.53574649999999}
  //       />
  //   );
  // }

  render() {
    // console.log("TaxiInfo:",this.props.taxiInfo);
    console.log("Connect Route:",this.props.route);
    // if(!this.props.lat || !this.props.route)
    if(!this.props.lat)
      return<div>Loading..</div>
    if(!this.props.route){
      return (
        <SimpleMapExampleGoogleMap
          containerElement={
             <div style={{height: '100%', width: '100%'}} />
          }
          mapElement={
             <div style={{height: '100%', width: '100%'}} />
          }
          lat = {this.props.lat}
          lng = {this.props.lng}
          markers = {this.renderMarkers()}
        />
      );
    }else{
      return (
        <SimpleMapExampleGoogleMap
          containerElement={
             <div style={{height: '100%', width: '100%'}} />
          }
          mapElement={
             <div style={{height: '100%', width: '100%'}} />
          }
          lat = {this.props.lat}
          lng = {this.props.lng}
          markers = {this.renderMarkers()}
          directions={this.props.route}
        />
      );
    }
  }
}

function mapStateToProps(state){
  return {taxiInfo : state.taxiInfo.taxiInfo,route : state.directions.directions};
}

export default connect(mapStateToProps)(SimpleMapExample);

@@ -1052,173 +1052,8 @@
  %7D%0A%0A
-  // renderMarkers()%7B%0A  //   return (%0A  //       %3CTaxiMarker%0A  //         lat = %7B25.0429295%7D%0A  //         lng = %7B121.53574649999999%7D%0A  //       /%3E%0A  //   );%0A  // %7D%0A%0A
   re
@@ -1061,16 +1061,16 @@
 der() %7B%0A
+
     // c
@@ -1270,24 +1270,27 @@
 ..%3C/div%3E%0A   
+ //
  if(!this.pr
@@ -1301,20 +1301,16 @@
 route)%7B%0A
-    
   return
@@ -1310,34 +1310,32 @@
  return (%0A      
-  
 %3CSimpleMapExampl
@@ -1337,34 +1337,32 @@
 xampleGoogleMap%0A
-  
         containe
@@ -1375,34 +1375,32 @@
 nt=%7B%0A           
-  
 %3Cdiv style=%7B%7Bhei
@@ -1431,38 +1431,34 @@
 %25'%7D%7D /%3E%0A        
- 
- 
 %7D%0A
-  
         mapEleme
@@ -1454,34 +1454,32 @@
    mapElement=%7B%0A
-  
            %3Cdiv 
@@ -1513,34 +1513,32 @@
 th: '100%25'%7D%7D /%3E%0A
-  
         %7D%0A      
@@ -1531,34 +1531,32 @@
       %7D%0A        
-  
 lat = %7Bthis.prop
@@ -1554,34 +1554,32 @@
 this.props.lat%7D%0A
-  
         lng = %7Bt
@@ -1585,34 +1585,32 @@
 this.props.lng%7D%0A
-  
         markers 
@@ -1646,410 +1646,43 @@
     
-/%3E%0A      );%0A    %7Delse%7B%0A      return (%0A        %3CSimpleMapExampleGoogleMap%0A          containerElement=%7B%0A             %3Cdiv style=%7B%7Bheight: '100%25', width: '100%25'%7D%7D /%3E%0A          %7D%0A          mapElement=%7B%0A             %3Cdiv style=%7B%7Bheight: '100%25', width: '100%25'%7D%7D /%3E%0A          %7D%0A          lat = %7Bthis.props.lat%7D%0A          lng = %7Bthis.props.lng%7D%0A          markers = %7Bthis.renderMarkers()%7D%0A          directions=%7B
+directions=%7B!this.props.route?null:
 this
@@ -1701,35 +1701,25 @@
 %7D%0A      
-  
 /%3E%0A    
-  );%0A    %7D
+);
 %0A  %7D%0A%7D%0A%0A

fix my code