refactor: move google maps API key to local env file (epicmaxco#394) (e…

…picmaxco#601)

* refactor: move google maps API key to local env file

* Update pre-production.md

* feat: add map key handling to CI config

.circleci/config.yml

@@ -39,9 +39,10 @@ jobs:
     steps:
       - checkout
       - run:
-          name: Add variables for Yandex Metrics and Drift live chat
+          name: Add variables
           command:
             echo "VUE_APP_INCLUDE_DEMOS=true" >> .env.production.local
+            echo "VUE_APP_GOOGLE_MAPS_API_KEY=$GOOGLE_MAPS_API_KEY" >> .env.production.local
       - restore_cache: *restore_cache
       - run: *install_dependencies
       - save_cache: *save_cache
@@ -65,10 +66,11 @@ jobs:
     steps:
       - checkout
       - run:
-          name: Add variables for Yandex Metrics and Drift live chat
+          name: Add variables
           command:
             echo "VUE_APP_YANDEX_METRICS_KEY=$YANDEX_METRICS_KEY" >> .env.production.local &&
             echo "VUE_APP_DRIFT_KEY=$DRIFT_KEY" >> .env.production.local
+            echo "VUE_APP_GOOGLE_MAPS_API_KEY=$GOOGLE_MAPS_API_KEY" >> .env.production.local
       - restore_cache: *restore_cache
       - run: *install_dependencies
       - save_cache: *save_cache

.env.example

@@ -1,4 +1,5 @@
 VUE_APP_YANDEX_METRICS_KEY=
 VUE_APP_DRIFT_KEY=
+VUE_APP_GOOGLE_MAPS_API_KEY=
 
 VUE_APP_INCLUDE_DEMOS=

docs/pre-production.md

@@ -9,6 +9,8 @@ We have a boierplate prepared with some analytics ingrained. This includes:
 
 To get these running - just provide keys to respective apis. You're advised to copy `.env.example` with rename to `.env` then modify it.
 
+Notice, that if you are about to use Google Maps then you also have to provide it with your personal API key. The key must be defined under the `VUE_APP_GOOGLE_MAPS_API_KEY` environment-variable (more on them below) and can be obtained [here](https://developers.google.com/maps/documentation/javascript/get-api-key).
+
 ## Deploy
 
 We use [circleci](https://circleci.com) to deploy vuestic version you're able to see on demo.

src/components/maps/google-maps/GoogleMap.vue

@@ -3,18 +3,17 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import * as GoogleMapsLoader from 'google-maps'
 
 export default {
   name: 'google-map',
 
-  computed: mapGetters({
-    config: 'config',
-  }),
-
   mounted () {
-    GoogleMapsLoader.KEY = this.config.googleMaps.apiKey
+    if (!process.env.VUE_APP_GOOGLE_MAPS_API_KEY) {
+      throw new Error('Please provide google maps api key from env (VUE_APP_GOOGLE_MAPS_API_KEY)')
+    }
+
+    GoogleMapsLoader.KEY = process.env.VUE_APP_GOOGLE_MAPS_API_KEY
     /* We stick to version updates instead of weekly channel update because
        using weekly updates you need to test them, but we prefer to use stable
        versions. */

src/store/modules/app.js

@@ -3,9 +3,6 @@ const state = {
     opened: false,
   },
   config: {
-    googleMaps: {
-      apiKey: 'AIzaSyBNAqPrTQoz9P4NBlDDyfxrnKiafkaL8iQ',
-    },
     palette: {
       primary: '#4ae387',
       danger: '#e34a4a',