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:
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:
center: {
lat: -23.553646087646484,
lng: -46.561336517333984
},
zoom: 14
};
If you want to handle the of map objects of Google 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.
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
