Skip to content

Instantly share code, notes, and snippets.

@alexfinnarn
Created February 13, 2018 18:13
Show Gist options
  • Save alexfinnarn/7d9408b1567fd18a13c48fe12e74c415 to your computer and use it in GitHub Desktop.
Save alexfinnarn/7d9408b1567fd18a13c48fe12e74c415 to your computer and use it in GitHub Desktop.
Let's Find Larry
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment