How to catch town name

[miljko1984]

How to catch town name on @click?

For now i have @click="position = {lat: $event.latLng.lat(), lng:$event.latLng.lng()}; for catching lat and lng.

Thanks in advance

[smithalan92]

You'd need to use Googles geocoding API for converting latitude/longitude into a readable address. For example

Directive @click="getTown($event.latLng.lat(), $event.latLng.lng())

Click Handler

<template>
...
</template>

<script>
import axios from 'axios'
export default {
.....
methods: {
    getTown: function(lat, lng) {
       axios.get("https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${apiKey}").then((response) => {
           // Ideally you'd search for the index with type = sublocality in address_components
           let town = response.results[0].address_components[3].long_name
           console.log("The town is " + town);
        })
    }
}
}
....
</script>

I haven't tested the above code, but thats the general idea. See the Google Maps API docs for more info

[miljko1984]

@smithalan92 thank you so much!!! I just changed few things and it works:

getTown (lat, lng) { axios.get("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lng + "&key=myapikeyhere") .then((response) => { // Ideally you'd search for the index with type = sublocality in address_components this.town = response.data.results[0].address_components[1].long_name console.log("The town is " + this.town); }) }

Have a nice day

[franzos]

There's an easier way, without additional request:

<gmap-autocomplete @place_changed="getAddress"></gmap-autocomplete>

...
getAddress(place) {
 console.log(place)
 this.address = {
  lat: place.geometry.location.lat(),
  lng: place.geometry.location.lng(),
  street: place.address_components[0].long_name,
  city: place.address_components[1].long_name,
  country: place.address_components[3].long_name,
 };
}
...

[felipeblini]

I've created this function to help find any location data into the address_components array:

     const getPlaceData = (place, infoType, format) => {
       let data,
        addressComponents = [...place.address_components];

      addressComponents.forEach(componentItem => {
        if (componentItem.types[0] === infoType) {
          data = componentItem[format];
          addressComponents.length = 0;
        }
      });

      return data;
    };

   axios.get("https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${apiKey}")
      .then((response) => {
        const place = response.data.results[0];

        const street = getPlaceData(place, "route", "long_name");
        const street_number = getPlaceData(place, "street_number", "long_name");
        const district =
            getPlaceData(place, "sublocality", "long_name") ||
            getPlaceData(place, "sublocality_level_1", "long_name");
        const city =
           getPlaceData(place, "locality", "long_name") ||
           getPlaceData(place, "administrative_area_level_2", "long_name");
        const state = getPlaceData(place, "administrative_area_level_1", "short_name");
        const country = getPlaceData(place, "country", "long_name");
      })

[websitevirtuoso]

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])
          }
        })
      })
    }