Track position of car and snap marker to the road?

[exzib]

I'm currently using this library to track the position of my car on a map but the main purpose of my web app is to track the position of a self-driving car in my local town (Hired by the company).

What I noticed when tracking my own position is that:

1. The position is often off the road, even though I am on the road.
2. The position isn't really moving nicely, I set the update frequency to both 0.5s/1s/5s and it doesn't move nicely at all

Is it possible to somehow:

1. Snap the marker to the road so it always stays to the closest road?
2. Animate the position from one update to the other and make it pan slowly, say I update the position every 5 seconds, could I somehow make it animate from point A to B with a time of 5 seconds, so it somehow follows the speed of my car as well?

My code is here below:

<template>
    <div id="map">
        <GmapMap
        ref="mapRef"
        :center="google && new google.maps.LatLng(this.lat, this.lng)"
        :zoom="15"
        map-type-id="terrain"
        style="height:100%;"
        :options="{
            disableDefaultUi: true,
            mapTypeControl: false,
            scaleControl: false,
            rotateControl: false,
            streetViewControl: false,
            fullscreenControl: false,
            zoomControl: false,
            styles: this.styles
        }"
        >
          <GmapMarker
                :key="index"
                v-for="(m, index) in vehicles"
                :position="google && new google.maps.LatLng(m.latitude, m.longitude)"
                :clickable="true"
                :draggable="false"
                @click="center=m.position"
                :icon="this.icon2"
            />
        </GmapMap>
    </div>
</template>

<script>
    import {gmapApi, loaded} from 'vue2-google-maps'
    export default {
        computed: {
            google: gmapApi
        },
        data() {
            return {
                icon2: {
                    url: "https://img.icons8.com/dusk/64/000000/unchecked-circle.png",
                    size: { width: 46, height: 46, f: "px", b: "px" },
                    scaledSize: { width: 23, height: 23, f: "px", b: "px" }
                },
                lat: 58.2705056,
                lng: 12.277687,
                vehicles: [],
                styles: [
                        {
                            "featureType": "all",
                            "elementType": "labels.text.fill",
                            "stylers": [
                                {
                                    "saturation": 36
                                },
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 40
                                }
                            ]
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.text.stroke",
                            "stylers": [
                                {
                                    "visibility": "on"
                                },
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 16
                                }
                            ]
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.icon",
                            "stylers": [
                                {
                                    "visibility": "off"
                                }
                            ]
                        },
                        {
                            "featureType": "administrative",
                            "elementType": "geometry.fill",
                            "stylers": [
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 20
                                }
                            ]
                        },
                        {
                            "featureType": "administrative",
                            "elementType": "geometry.stroke",
                            "stylers": [
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 17
                                },
                                {
                                    "weight": 1.2
                                }
                            ]
                        },
                        {
                            "featureType": "landscape",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 20
                                }
                            ]
                        },
                        {
                            "featureType": "poi",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 21
                                }
                            ]
                        },
                        {
                            "featureType": "road.highway",
                            "elementType": "geometry.fill",
                            "stylers": [
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 17
                                }
                            ]
                        },
                        {
                            "featureType": "road.highway",
                            "elementType": "geometry.stroke",
                            "stylers": [
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 29
                                },
                                {
                                    "weight": 0.2
                                }
                            ]
                        },
                        {
                            "featureType": "road.arterial",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 18
                                }
                            ]
                        },
                        {
                            "featureType": "road.local",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 16
                                }
                            ]
                        },
                        {
                            "featureType": "transit",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 19
                                }
                            ]
                        },
                        {
                            "featureType": "water",
                            "elementType": "geometry",
                            "stylers": [
                                {
                                    "color": "#000000"
                                },
                                {
                                    "lightness": 17
                                }
                            ]
                        }
                    ]
            }
        },
        mounted() {
            // listen to new positions
            Echo.channel('location').listen('.NewPosition', (e) => {
                Vue.set(this.vehicles, this.vehicles.findIndex(f => f.id === e.vehicle.id), e.vehicle)
                this.lat = e.vehicle.latitude;
                this.lng = e.vehicle.longitude;
                //this.vehicles.push(e.vehicle);
            });
            // handle markers 
        },
        created() {
            this.fetchVehicles();
            this.updatePosition();
        },
        methods: {
            fetchVehicles() {
                self = this;
                axios.get('/api/vehicles').then(response => {
                    self.vehicles = response.data;
                });
            },
            updatePosition() {
                console.log(this.vehicles);
            }
        }
    }
</script>

[jsd219]

@exzib Did you figure this out? I am trying to do the same thing

[brandongrant]

I'm trying as well but no luck.