I added a Google map and a marker to show my approximate location on my ReactJS resume.

I have this ReactJS resume with Carbon, Sass, Styled Components, react-router app. It's an old app created with create-react-app that consume Gitconnected API to get my information and show to the user.

It has components on which files, such as Sidebar, Navbar, UserHeader, Layout and GoogleMarker and a Mobile Nav.

Furthermore, it's deployed on Netlify and you can access in this link:
marcelomsc-cv

You can check it out on Github:
portfolio-marcelo

Here we have a snapshot of the google maps implementation:

The main problem was deploying to Netlify that handles the environment variables in many ways.

I use react-dotenv to set my environment variable on .env to use on development and using of window.env to access a variable on Netlify, because the window.env of react-dotenv get global variables that are setted.

On Netlify UI, I set the variable to use on production/build.

Here's how I used on my Map.js:

let googleMapsApi = '';
if (env.ENV_GOOGLE_MAPS_API_KEY !== undefined) {
   // dev environment
   googleMapsApi = env.ENV_GOOGLE_MAPS_API_KEY;
}
if (window.env.GOOGLE_MAPS_API_KEY !== undefined) {
   // production/build enviroment
   googleMapsApi = window.env.GOOGLE_MAPS_API_KEY;
}

To use the API of Google Maps, it's simple:
Install the google-map-react package.

Setting some props:

const defaultProps = {
    center: {
      lat: -23.553646087646484,
      lng: -46.561336517333984
    },
    zoom: 14
  };

If you want to handle the of map objects of Google Maps:

const handleApiLoaded = (map, maps) => {
    // use map and maps objects
    // todo - implement handles to users interactions
  };

You can use the GoogleMapReact component of the package installed.
Pass the API on bootstrapURLKeys. I'm using the variable googleMapsApi to set the api key.

<GoogleMapReact
  bootstrapURLKeys={{ key: googleMapsApi }}
  defaultCenter={defaultProps.center}
  defaultZoom={defaultProps.zoom}
  yesIWantToUseGoogleMapApiInternals={true}
  onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}>
</GoogleMapReact>

Any questions, suggestions are welcome.

Maybe in the future I can explain more about this project