import GoogleMapReact from 'google-map-react';
import Geocode from "react-geocode";
...//other imports

const AnyReactComponent = ({ text }) => <div>{text}</div>;
class History extends Component {
   static defaultProps = {
    center: {
    lat: 59.95,
    lng: 30.33
   },
   zoom: 11
  };
static async getInitialProps(props) {
let addresscounts = await tracker.methods.zipCounts().call()

let addressArray = await Promise.all(
  Array(parseInt(addresscounts))
    .fill()
    .map((element, index) => {
      return tracker.methods.zipcodes(props.query.id,index).call();
    })
);
//////////////////////////react-geocode////////////////////
Geocode.setApiKey("AIzaSyCdVP9OOKwKsMHJhgmd0nhI3_PZCX5zRXI");
Geocode.fromAddress("Eiffel Tower").then(
response => {
  const { lat, lng } = response.results[0].geometry.location;
  console.log(lat, lng);
},
error => { console.error(error);});
///////////////////////////////////
return {
  addressArray
};
}

render(){

 return(
     <div style={{ height: '100vh', width: '100%' }}>
     <GoogleMapReact
       bootstrapURLKeys={{ key: "AIzaSyAG3SH8vY-c04ljXBQO9mEPsOWQxLl_jcM"}}
       defaultCenter={this.props.center}
       defaultZoom={this.props.zoom}
     >
       <AnyReactComponent
         lat={59.955413}
         lng={30.337844}
         text="My Marker"
       />
     </GoogleMapReact>
   </div>
 );
 }
}
export default History;