google maps added

VueApp/src/components/GoogleMap.vue

@@ -1,11 +1,72 @@
 <template>
+  <div>
+    <div>
+      <h2>Search and add a pin</h2>
+      <label>
+        <gmap-autocomplete
+          @place_changed="setPlace">
+        </gmap-autocomplete>
+        <button @click="addMarker">Add</button>
+      </label>
+      <br/>
 
+    </div>
+    <br>
+    <gmap-map
+      :center="center"
+      :zoom="12"
+      style="width:100%;  height: 400px;"
+    >
+      <gmap-marker
+        :key="index"
+        v-for="(m, index) in markers"
+        :position="m.position"
+        @click="center=m.position"
+      ></gmap-marker>
+    </gmap-map>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "GoogleMap"
+  export default {
+    name: 'GoogleMap',
+    data () {
+      return {
+        center: { lat: 65.508, lng: -90.587 },
+        markers: [],
+        places: [],
+        currentPlace: null
+      }
+    },
+    methods: {
+      setPlace (place) {
+        this.currentPlace = place
+      },
+      addMarker () {
+        if (this.currentPlace) {
+          const marker = {
+            lat: this.currentPlace.geometry.location.lat(),
+            lng: this.currentPlace.geometry.location.lng()
+          }
+          this.markers.push({ position: marker })
+          this.places.push(this.currentPlace)
+          this.center = marker
+          this.currentPlace = null
+        }
+      },
+      geolocate: function () {
+        navigator.geolocation.getCurrentPosition(position => {
+          this.center = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          }
+        })
+      }
+    },
+    mounted () {
+      this.geolocate()
     }
+  }
 </script>
 
 <style scoped>

VueApp/src/components/Main.vue

@@ -4,7 +4,7 @@
       <img src="http://via.placeholder.com/1000x100"/>
     </div>
     <div class="mainMap">
-      <img src="http://via.placeholder.com/500x500"/>
+      <google-map/>
     </div>
     <div class="infoGraphic">
       <img src="http://via.placeholder.com/800x100"/>
@@ -13,11 +13,15 @@
 </template>
 
 <script>
+  import GoogleMap from './GoogleMap.vue'
   export default {
     name: 'main',
     props: ['auth', 'authenticated'],
     beforeMount () {
       this.auth.login()
+    },
+    components: {
+      GoogleMap
     }
   }
 </script>

VueApp/src/main.js

@@ -1,11 +1,19 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import * as VueGoogleMaps from 'vue2-google-maps'
 import App from './App'
 import router from './router'
 
 Vue.config.productionTip = false
 
+Vue.use(VueGoogleMaps, {
+  load: {
+    key: 'AIzaSyDq8NHbKHAd2HE3SCtIpxq8yYVD16PzUlY',
+    libraries: 'places'
+  }
+})
+
 new Vue({ // eslint-disable-line no-new
   el: '#app',
   router,