xkjyeah / vue-google-maps

Google maps component for vue with 2-way data binding
https://xkjyeah.github.io/vue-google-maps/
1.88k stars 475 forks source link

How to reverse geocode properly? Lat Lng To Address #644

Open emrecanmuslu opened 5 years ago

emrecanmuslu commented 5 years ago

Hi, I would like to receive address information with coordinates. How can I do that? Thank you.

danbhala commented 5 years ago

Here's a method im using if thats any help

reverseGeocode(coordinates){
      const that = this;
      axios
        .get(`https://maps.google.com/maps/api/geocode/json?latlng=${coordinates.lat},${coordinates.lng}&key=${GOOGLE_API_KEY}`)
          .then(response => {
            console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
        .finally(() => this.loading = false)
    }
Thaimay commented 4 years ago

postman is good but on nuxt get CORS error

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/geocode/json?latlng=21.0222089,105.81729949999999&key=key' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field auth-token is not allowed by Access-Control-Allow-Headers in preflight response.
emrecanmuslu commented 4 years ago

postman is good but on nuxt get CORS error

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/geocode/json?latlng=21.0222089,105.81729949999999&key=key' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field auth-token is not allowed by Access-Control-Allow-Headers in preflight response.

googleMaps: function(callback,locations){ let geocoder = new google.maps.Geocoder(); geocoder.geocode({'location': locations }, function(results, status){ if (status === 'OK') { if (results[0]) { callback(results[0].formatted_address); } else { return null } } }); }

this.googleMaps(function(addr){ localStorage.setItem("thisAdress", addr); },locations);

This code does not give cors error.

websitevirtuoso commented 4 years ago

I could make it work with native nay without additional request via axios. (In my can we dont use any kind of request ay all)

decodeLatLong (position) {
      this.$gmapApiPromiseLazy().then(() => {
        // eslint-disable-next-line no-undef
        const geocoder = new google.maps.Geocoder()

        geocoder.geocode({ location: { lat: position.coords.latitude, lng: position.coords.longitude } }, (results, status) => {
          if (status === 'OK') {
            this.getFromAutocomplete(results[0])
          }
        })
      })
    }