Let's Find Larry

map.vue

<template>
<div>
  <card v-show="!showMap"
        :title="$t('Show Meetup Locations')">
    <a href="#" @click.prevent="loadMap()">Looking for a Meetup with your current area?</a>
    <br>
    You are most likely in: {{this.userLocationGuess}}
  </card>
  <card>
    <div v-if="!loading"
         class="form-group">
      <label for="location-input">Alternate Location:</label>
      <gmap-autocomplete id="location-input"
                          @place_changed="setPlace"
                          class="form-control">
      </gmap-autocomplete>
    </div>
    <div id="user-group-map"
        v-if="showMap"
        style="height: 100%">
      <transition>
        <gmap-map
          :center="{lat: startLat, lng: startLong}"
          :zoom="7"
          v-if="loading === false"
          style="width: 1000px; height: 800px;"
        ></gmap-map>
      </transition>
      <transition>
        <button class="btn btn-sm spinner col-md-offset-5"
                v-if="loading === true">
          <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
          Loading...
        </button>
      </transition>
    </div>
  </card>
</div>
</template>

<script>


export default {

  metaInfo () {
    return { title: this.$t('map') }
  },
  data() {
    return {
      startLat: 10,
      startLong: 10,
      userLocation: {
        latitude: '...',
        longitude: '...',
      },
      loading: true,
      showMap: false,
      userLocationGuess: 'Loading...'
    };
  },
  mounted() {
    let that = this;

    var options = {
      // enableHighAccuracy: true,
      timeout: 8000,
      maximumAge: 0
    };

    function success(pos) {
      const crd = pos.coords;
      const lat = crd.latitude;
      const long = crd.longitude;
      const accuracy = crd.accuracy;

      console.log('Your current position is:');
      console.log(`Latitude : ${lat}`);
      console.log(`Longitude: ${long}`);
      console.log(`More or less ${accuracy} meters.`);

      // Store user location to be used later.
      that.userLocation = crd;
      that.startLat = lat;
      that.startLong = long;

      // Take map off of loading mode.
      that.loading = false;

      // Add readable guess to user's location.
      that.geocodeLocation(lat, long, that);
    };

    function error(err) {
      console.warn(`ERROR(${err.code}): ${err.message}`);
    };

    navigator.geolocation.getCurrentPosition(success, error, options);
  },
  methods: {
    loadMap() {
      this.showMap = true;
    },
    setPlace(place) {
      this.startLat = place.geometry.location.lat();
      this.startLong = place.geometry.location.lng();
    },
    geocodeLocation(lat, long, that) {
      // google object is in global scope loaded by vue-google-maps.
      const geocoder = new google.maps.Geocoder;

      geocoder.geocode({'location': {'lat': lat, 'lng': long}}, function(results, status) {
        if (status === 'OK') {
          // Make sure there is at least one result.
          if (results[0]) {
            // Find locality first and then state.
            let placeName = '';
            const location = results.find((el) => {
              // "locality" is city short_name, e.g. Boulder.
              // "administrative_area_level_1" is state short_name, e.g. "CO".
              el.address_components.find((comp) => {
                if (comp.types.includes('locality')) {
                  // Since the locality is in the formatted_address field, we can use it to truncate string.
                  placeName = comp.short_name + el.formatted_address.split(comp.short_name)[1];
                }
              })
            });

            // Set the place name to show to user.
            if (placeName) {
              that.userLocationGuess = placeName;
            } else {
              // If no placeName, then just list coordinates.
              console.log('Failed to generate place name.');
              that.userLocationGuess = `${that.userLocation.latitude},${that.userLocation.longitude}`;
            }

          } else {
            window.alert('No results found');
          }
        } else {
          window.alert('Geocoder failed due to: ' + status);
        }
      });
    }
  },
}
</script>

<style scoped>
#user-group-map {
  text-align: center;
  margin: auto;
}
</style>