This video is available to students only

Displaying a map

Using the Google Maps API to display the geographic data on a map

Displaying a map#

Setup#

Now we'll add a Google map to the page that will show the locations of our UN/LOCODE ports. Add the dependency for loading the Google Maps API with React.

Create a new file called .env in the client folder and add your Google Maps API key as the variable REACT_APP_GOOGLE_MAPS_API_KEY. Make sure this file is listed in your .gitignore file.

Also, add the API key as an environment variable to your Heroku app setup using the online dashboard. Choose the Settings tab, then click Reveal Config Vars in the Config Vars section.

Heroku config vars setup
 
No discussions yet