Merge pull request #655 from sharetribe/google-maps-api-key

Make Google Maps API key configurable

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)

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
+```

public/index.html

@@ -143,7 +143,7 @@
       })(document);
     </script>
 
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZhsJGsRv0c9HykUHfnVAIVOb1tWtqrTg&libraries=places"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_GOOGLE_MAPS_API_KEY%&libraries=places"></script>
     <!--
          Stripe script should be on every page, not just the pages that
          use the API: