diff --git a/docs/README.md b/docs/README.md index 303010b9..a6cd401c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -18,3 +18,4 @@ Documentation for specific topics can be found in the following files: * [i18n](i18n.md) * [Colors and icons](colors-and-icons.md) * [Starting a new customisation project](starting-a-new-customisation-project.md) +* [Google Maps](google-maps.md) diff --git a/docs/google-maps.md b/docs/google-maps.md new file mode 100644 index 00000000..8104697b --- /dev/null +++ b/docs/google-maps.md @@ -0,0 +1,28 @@ +# Google Maps + +Starter App uses the Google Maps API for showing a map and in searching locations in the search +autocompletion. This document describes how to setup the API key for the API requests to work +properly. + +## Generate a Google Maps API key + +Go to the +[Google Maps JavaScript API V3 Reference](https://developers.google.com/maps/documentation/javascript/reference), +click on the "GET A KEY" button in the top bar, and follow the instructions. You can copy the given +key to your application now. + +## Enable Google Places API Web Service + +Follow the instructions in the +[Getting started](https://developers.google.com/maps/documentation/javascript/places#GetStarted) +section of the Places library documentation to enable using the Google Places API Web Service. + +## Setup the application to use the API key + +The application uses the `REACT_APP_GOOGLE_MAPS_API_KEY` environment variable for the key value. For +local development, you can add the variable in the Gitignored `.env.development.local` file in the +project root: + +``` +REACT_APP_GOOGLE_MAPS_API_KEY=my-key-here +``` diff --git a/public/index.html b/public/index.html index 8dba04aa..ed031279 100644 --- a/public/index.html +++ b/public/index.html @@ -143,7 +143,7 @@ })(document); - +