some updates

VueApp/src/components/GoogleMap.vue

@@ -8,17 +8,17 @@
     <ul>
      <li> scroll to location: scroll an autocompleted location into viewport. </li>
      <li> clear map: clear route and markers from map. </li>
-     <li> geo-locate: locate user based on geographic location (must be enabled in browser). </li>
+     <li> geolocate: locate user based on geographic location (must be enabled in browser). </li>
     </ul>
     <div>
       <label>
         <gmap-autocomplete @place_changed="setPlace"></gmap-autocomplete>
-        <button @click="gotoPlace">scroll to location</button>
+        <button @click="gotoPlace(currentPlace)">scroll to location</button>
+        <button @click="removeMarkers">clear route</button>
+        <button @click="locateUser">geolocate</button>
       </label>
       <br/>
     </div>
-    <button @click="removeMarkers">clear map</button>
-    <button @click="locateUser">geo-locate</button>
     <br>
     <gmap-map
       @click="addMarker"
@@ -50,12 +50,12 @@
           lng: place.geometry.location.lng()
         }
       },
-      gotoPlace () {
-        this.$refs.gMap.panTo(this.currentPlace)
+      gotoPlace (location) {
+        this.$refs.gMap.panTo(location)
       },
       locateUser () {
         navigator.geolocation.getCurrentPosition(position => {
-          this.$refs.gMap.panTo({
+          this.gotoPlace({
             lat: position.coords.latitude,
             lng: position.coords.longitude
           })
@@ -70,20 +70,20 @@
           this.markers[0] = { position: marker }
         } else if (this.markers.length >= 1) {
           this.markers[1] = { position: marker }
-          this.getRoute(this.markers[0], this.markers[1])
+          this.setRoute(this.markers[0], this.markers[1])
           this.markers[0] = this.markers[1]
         }
       },
       removeMarkers () {
+        this.clearRoute()
         this.markers = []
-        if (this.directionsDisplay) this.directionsDisplay.setMap(null)
       },
-      getRoute: function (a, b) {
-        if (this.directionsDisplay) this.directionsDisplay.setMap(null)
+      setRoute: function (a, b) {
+        this.clearRoute()
         this.directionsService = new google.maps.DirectionsService() // eslint-disable-line no-undef
         this.directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true }) // eslint-disable-line no-undef
         this.directionsDisplay.setMap(this.$refs.gMap.$mapObject)
-        // ---------------------------------------------------------------
+        // -------------------------------------------------------
         let vm = this
         vm.directionsService.route({
           origin: a.position,
@@ -96,6 +96,9 @@
             alert('Directions request failed due to ' + status)
           }
         })
+      },
+      clearRoute () {
+        if (this.directionsDisplay) this.directionsDisplay.setMap(null)
       }
     }
   }