Skip to content

Instantly share code, notes, and snippets.

@StevenKowalzik
Created October 16, 2018 13:23
Show Gist options
  • Save StevenKowalzik/e1cbe61459f60f46416ea4d0d61f4b8a to your computer and use it in GitHub Desktop.
Save StevenKowalzik/e1cbe61459f60f46416ea4d0d61f4b8a to your computer and use it in GitHub Desktop.
Google Direction Request with vue2-google-maps
<template>
<div>
<h2>Map</h2>
<GmapMap
ref="gmap"
:center="{lat:53.0, lng:8.8}"
:zoom="13"
map-type-id="terrain"
style="height: 600px"
>
</GmapMap>
</div>
</template>
<script>
import {gmapApi} from 'vue2-google-maps'
export default {
name: 'Map',
computed: {
},
props: {
},
data () {
return {
origin: null,
destination: null,
googleRoute: null
}
},
mounted () {
},
methods: {
calculateRoute: function () {
this.$gmapApiPromiseLazy().then(() => {
const directionsService = new google.maps.DirectionsService;
const directionsDisplay = new google.maps.DirectionsRenderer;
const travelOptions = {
origin: this.origin,
destination: this.destination,
travelMode: 'DRIVING',
provideRouteAlternatives: true,
drivingOptions: {
departureTime: new Date(),
trafficModel: 'bestguess'
},
unitSystem: google.maps.UnitSystem.METRIC
}
//directionsDisplay.setMap(map)
directionsService.route(travelOptions, (result, status) => {
if (status == 'OK') {
console.log('request successfull...')
console.log(result)
this.googleRoute = result
//directionsDisplay.setDirections(result);
}
})
})
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment