const GettingStartedGoogleMap = withGoogleMap(props =>(
    <GoogleMap
      defaultZoom={13}
      center={props.center}
      >
      {if(props.markers !== undefined && props.markers != null && props.markers.length > 0)
        {props.markers.map(marker => (
          <InfoWindow  position={{ lat: marker.latitude, lng: marker.longitude }}
          key={marker.id}>
              <div>
              {marker.price}
              </div>
          </InfoWindow>
        ))}
      }
</GoogleMap>
));

export class AppMap extends Component {

 constructor(props) {
   super(props);
   this.Ref = firebase.database().ref().child('app').child('cards');
   this.state = ({
     markers : [{
       latitude: "",
       longitude: "",
       price: "",
       id: ""
     }]
   })
 }

 componentWillUpdate (){
   const previousMarker = this.state.markers;
   this.Ref.orderByChild('address').equalTo(this.props.city)
      .on('child_added', snap => {
      previousMarker.push({
        latitude: snap.node_.children_.root_.right.left.value.children_.root_.left.value.value_,
        longitude: snap.node_.children_.root_.right.left.value.children_.root_.value.value_,
        price: snap.node_.children_.root_.value.value_,
        key: snap.key + "_Marker",

        })

        console.log(previousMarker)

      })
 }


     render() {
         return (
             <div style={{height: `400px`}}>
                 <GettingStartedGoogleMap
                 containerElement={
                <div style={{ height: `100%` }} />
              }
              mapElement={
                <div style={{ height: `100%` }} />
              }

              center={this.props.center}
              markers={this.state.markers}

              googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
              />
            </div>
         );
     }
   }