How to reverse geocode properly with vue2-google-maps

Question

This is the response returned by the server :

Using basic reverse geocoding provided by google

<script>

    function geocodelatLng(){
        var response = [
        {
            "address": "213 Marlon Forks\nSouth Corineland, HI 81723-1044",
            "lat": "10.30431500",
            "lng": "123.89035500"
        },
        {
            "address": "1291 Stephania Road\nLake Dorotheastad, TN 82682-76",
            "lat": "10.30309100",
            "lng": "123.89154500"
        },
        {
            "address": "20330 Schmeler Course Apt. 210\nNorth Ari, NV 70048",
            "lat": "10.30356400",
            "lng": "123.89964100"
        }
        ] ; 




        return _.map(response,coords => { 
            // console.log(arr.index);

            var geocoder = new google.maps.Geocoder;


            var latLng = { 
                lat : parseFloat(coords.lat),
                lng : parseFloat(coords.lng)
            }  ; 


        // for every lat,lng . 
        // console.log(latLng);

        geocoder.geocode({'location': latLng},function (results,status){ 
            if (status === 'OK') {
                if (results[0]) {
                    console.log(results[0].formatted_address);
                } else {

                    window.alert('No results found');

                }
            } else {
                window.alert('Geocoder failed due to: ' + status);
            }

        });

}); }

this worked and it logs in the console 3 geocoded addresses. But when I use it with this package. It doesn't work this is my code.

  geocodedAddress(){
    let geocoder = new google.maps.Geocoder();
    let theLocations = this.locations ;

    return _.map(theLocations, addr => { 

      var geocoder = new google.maps.Geocoder();

      var locationss = { 
        lat : parseFloat(addr.lat),
        lng : parseFloat(addr.lng)
      }  ; 

    // var sampleLocation = { lat: 1.39, lng: 103.8 };

    return new Promise(function(resolve, reject) {
      geocoder.geocode({'location': locationss }, function(results, status){
        if (status === 'OK') {
          if (results[0]) {
            return results[0].formatted_address;
          } else {
            console.log(status);
            window.alert('No results found');
          }
        }
      })
    });
  });

  }

in my template :

   <v-list-tile-content>
        <v-list-tile-title v-text="geocodedAddress"></v-list-tile-title>
        <v-list-tile-sub-title>{{ address.address }}</v-list-tile-sub-title>
   </v-list-tile-content>

can you please help me what should i do with my code. Because I'm having a hard time with this .

ittus · Answer 1 · 2018-06-21T12:34:55.963

geocodedAddress is async, you can't use it in HTML template.

You should create a data attribute (for example formatedAddresses) to store result from async request

 data() {
     return {
         locations: [],
         formatedAddresses: []
     }
 },
 created() {
     // for example, you can call it in created hooks
     this.geocodedAddress()
 },
 methods: {
    geocodedAddress() {
        var self = this;
        let geocoder = new google.maps.Geocoder();
        let theLocations = this.locations ;

        return Promise.all(_.map(theLocations, addr => { 

        var geocoder = new google.maps.Geocoder();

            var locationss = { 
                lat : parseFloat(addr.lat),
                lng : parseFloat(addr.lng)
            } ; 

            // var sampleLocation = { lat: 1.39, lng: 103.8 };

            return new Promise(function(resolve, reject) {
                geocoder.geocode({'location': locationss }, function(results, status){
                    if (status === 'OK') {
                    if (results[0]) {
                        return results[0].formatted_address;
                    } else {
                        console.log(status);
                        window.alert('No results found');
                        return null
                    }
                    }
                })
            });
        })).then(data => {
            console.log(data)
            this.formatedAddresses = data
        })
    }
}

and in template

  <div v-for="address in formatedAddresses" :key="address">{{ address }}</div>

i put that geocodedAddress in a computed object since I'm passing it as props from my parent component which fetches the data from the server. — TheBAST, Jun 22 '18 at 02:30
` ` Something like that and when fetching the data. `getLocations(){ axios.get("api/v1/delivery-addresses") .then(response => this.addresses = response.data) .catch(error => console.log(error.response.data)); }` — TheBAST, Jun 22 '18 at 02:30
Can you please read my Post sir @ittus, you're the only who can help me https://pastebin.com/KZuvBrXM Can you please fix whatever error Ive made :) — TheBAST, Jul 20 '18 at 15:52

How to reverse geocode properly with vue2-google-maps

1 Answers1