reverse geocode to display address in result

src/App.vue

@@ -83,6 +83,7 @@
 
 <script>
 import './assets/css/style.css'
+
 import GmaltGeoloc from './components/GmaltGeoloc'
 import GmaltMap from './components/GmaltMap'
 import GmaltSearch from './components/GmaltSearch'
@@ -107,7 +108,7 @@ export default {
       return AltService
         .get(lat, lng)
         .then((json) => {
-          if (requestedPosition === this.position) {
+          if (JSON.stringify(requestedPosition) === JSON.stringify(this.position)) {
             this.loading = false
             this.alt = json.alt
           }

src/components/GmaltResult.vue

@@ -16,7 +16,7 @@
     </div>
     <div class="card-item">
       <span class="card-item-title">Address :</span>
-      <span class="card-item-value">
+      <span class="card-item-value card-item-value-address">
         <strong v-if="address">{{ address }}</strong>
         <span v-if="!address">No value</span>
       </span>
@@ -31,9 +31,34 @@
 </template>
 
 <script>
+  import GeocodeService from '../services/GeocodeService'
+
   export default {
     name: 'gmalt-result',
     props: ['lat', 'lng', 'alt', 'loading'],
+    watch: {
+      position () {
+        if (this.lng && this.lat) {
+          GeocodeService
+            .get(this.lat, this.lng)
+            .then((result) => {
+              this.setAddress(result[0], result[1])
+            })
+        }
+      }
+    },
+    methods: {
+      setAddress (requestedPosition, address) {
+        if (JSON.stringify(requestedPosition) === JSON.stringify(this.position)) {
+          this.address = address
+        }
+      }
+    },
+    computed: {
+      position () {
+        return {lat: this.lat, lng: this.lng}
+      }
+    },
     data () {
       return {
         address: ''
@@ -60,6 +85,11 @@
     float: right;
   }
 
+  .card-item-value-address {
+    width: calc(100% - 70px);
+    text-align: right;
+  }
+
   .card-item--result {
     margin-top: 20px;
   }

src/services/AltService.js

@@ -1,19 +1,12 @@
 import * as resolveUrl from 'resolve-url'
+import HttpService from './HttpService'
 
 const apiUrl = resolveUrl(process.env.API_URL, '/altitude')
 
 export default {
   get (lat, lng) {
-    return fetch(apiUrl + '?lat=' + lat + '&lng=' + lng)
-      .then(function (response) {
-        if (response.status >= 200 && response.status < 300) {
-          return response
-        } else {
-          let error = new Error(response.statusText)
-          error.response = response
-          throw error
-        }
-      })
+    return HttpService
+      .get(apiUrl + '?lat=' + lat + '&lng=' + lng)
       .then(function (response) {
         return response.json()
       })

src/services/GeocodeService.js

@@ -0,0 +1,29 @@
+export default {
+  geocoderObject: null,
+
+  geocoder () {
+    if (!this.geocoderObject) {
+      /* global google */
+      this.geocoderObject = new google.maps.Geocoder()
+    }
+
+    return this.geocoderObject
+  },
+
+  get (lat, lng) {
+    const requestedPosition = {lat: lat, lng: lng}
+    return new Promise((resolve) => {
+      this.geocoder().geocode({location: requestedPosition}, function (results, status) {
+        let address = null
+        if (status === 'OK') {
+          if (results[0]) {
+            address = results[0].formatted_address
+          }
+        }
+
+        resolve([requestedPosition, address])
+      })
+    })
+  }
+}
+

src/services/HttpService.js

@@ -0,0 +1,14 @@
+export default {
+  get (url) {
+    return fetch(url)
+      .then(function (response) {
+        if (response.status >= 200 && response.status < 300) {
+          return response
+        } else {
+          let error = new Error(response.statusText)
+          error.response = response
+          throw error
+        }
+      })
+  }
+}