Rotate dynamic marker svg doesn't work

[bpdarlyn]

I want bind my own property icon with the marker icon, I have this code :

<template >
    <google-marker :position="position" :icon="icon" v-if="showDriver">
    </google-marker>
</template>
<script>
    import {Marker} from 'vue2-google-maps';
    export default {
        props:["id","position","status","parked","icon"],
        components: { 'google-marker': Marker},
        data(){ return {}},
        mounted(){},
        methods: {
        },
        computed:  {
            showDriver() {
                if (this.status){
                    console.log(this.status);
                    if(this.status.id==1){
                        return true;
                    }else{
                        //todo do something
                    }
                }
                return false;
            }
        }
    }
</script>
<style></style>

this is my props icon

{
        path: 'my-path',
        fillColor: 'blue',
        fillOpacity: 1,
        scale: 1,
        rotation: 0,
        strokeWeight: 0.2
}

but when I make this

this.icon.rotation=90

my maker icon doesn't change his rotation on view of the map

do you have any idea ?

[heyarviind]

I've the same problem, need help to rotate the custom SVG marker

[xkjyeah]

1. You should not be modifying your props
2. The watcher for icon watches the object reference. It does not watch the properties of the object for changes.

If you fix 1) you will also fix 2)

[bpdarlyn]

ok thank's very much, I solved my problem with watchers on my own property and after update by instance of object the marker. thanks for answer. :+1:

[socramjunio2]

I want bind my own property icon with the marker icon, I have this code :

<template >
    <google-marker :position="position" :icon="icon" v-if="showDriver">
    </google-marker>
</template>
<script>
    import {Marker} from 'vue2-google-maps';
    export default {
        props:["id","position","status","parked","icon"],
        components: { 'google-marker': Marker},
        data(){ return {}},
        mounted(){},
        methods: {
        },
        computed:  {
            showDriver() {
                if (this.status){
                    console.log(this.status);
                    if(this.status.id==1){
                        return true;
                    }else{
                        //todo do something
                    }
                }
                return false;
            }
        }
    }
</script>
<style></style>

this is my props icon

{
        path: 'my-path',
        fillColor: 'blue',
        fillOpacity: 1,
        scale: 1,
        rotation: 0,
        strokeWeight: 0.2
}

but when I make this

this.icon.rotation=90

my maker icon doesn't change his rotation on view of the map

do you have any idea ?

@bpdarlyn Good afternoon, Can you better explain how you did it to fix this problem?

[roushankumar01]

@bpdarlyn Hey, can you please explain, how you solve this problem.

[MakhmudovMurod]

I have a same issue. I have heading degree for all my navigation arrows(markers), but I cannot rotate them. Is there anyone to help me solve this problem.