Map.jsx

import React from 'react';
import PropTypes from 'prop-types';
import GoogleMap from 'google-map-react';
import Section from 'grommet/components/Section';

const Map = ({ center, zoom, onBoundsChange, onMapLoaded }) => (
  <Section pad="none" style={{ height: '500px' }}>
    <GoogleMap
      center={center}
      zoom={zoom}
      onGoogleApiLoaded={onMapLoaded}
      onBoundsChange={onBoundsChange}
      yesIWantToUseGoogleMapApiInternals
    />
  </Section>
);

Map.defaultProps = {
  center: {
    lat: 30.267,
    lng: -97.743,
  },
};

Map.propTypes = {
  onBoundsChange: PropTypes.func.isRequired,
  onMapLoaded: PropTypes.func.isRequired,
  center: PropTypes.shape({
    lat: PropTypes.number.isRequired,
    lng: PropTypes.number.isRequired,
  }).isRequired,
  zoom: PropTypes.number.isRequired,
};


export default Map;