import React, {Fragment, useEffect, useState} from 'react';
import GoogleMapReact from 'google-map-react';

const Map = () => {
  const [center, setCenter] = useState();

  useEffect(() => {
    window.navigator.geolocation.getCurrentPosition(position => {
      setCenter({
        lat: position.coords.latitude,
        lng: position.coords.longitude
      });
    });
  }, []);

  return <Fragment>
    <GoogleMapReact
      bootstrapURLKeys={{ key: 'my_api_key' }}
      center={center}
      yesIWantToUseGoogleMapApiInternals
    />
  <button
    onClick={() => window.navigator.geolocation.getCurrentPosition(position => {
      setCenter({
        lat: position.coords.latitude,
        lng: position.coords.longitude
      });
    })}
  >
    Locate Me
  </button>
  </Fragment>;
};