DEV Community

Cover image for Add a google maps on my reactjs resume
Marcelo
Marcelo

Posted on

Add a google maps on my reactjs resume

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:

snapshot google 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;
}
Enter fullscreen mode Exit fullscreen mode

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
  };
Enter fullscreen mode Exit fullscreen mode

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
  };
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Any questions, suggestions are welcome.

Maybe in the future I can explain more about this project

Top comments (0)