Custom marker dynamically about vue-googlemaps

[thanhthaohoang]

const options = await Object.assign(this.opt, {
 position: this.marker.position,
  icon: {
     url: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png',
     scaledSize: new window.google.maps.Size(25, 32)
  }
}, this.$props)

In your code, position can take the value of the position prop that you stated earlier. Indeed, when you'll change the value of the position prop from your parent component, the position of your marker will be updated too I think.

[thanhthaohoang]

Hi @ulises58 !
In my parent component, I send a prop called marker to my child component marker-places. That prop contains an object with a key position with coordinates values.
In the child component, I'm just attributing the sent position in the optionsconstant when the map is ready.
I don't know if it answers your question 😬

[ulises58]

Hi, thank you very much, I realized what my mistake was. Which is here

   const boundProps = [
        'animation',
        'clickable',
        'cursor',
        'position'
    ]

the position property was missing
thanks for your time @thanhthaohoang

[thanhthaohoang]

@ulises58 Glad that I helped and that you found the solution on your own !

[ulises58]

hello how I'm starting to work with the modified markers, I have a question how do you actuate the position of the marker? @thanhthaohoang

[ulises58]

Hello @thanhthaohoang , I think I did my question wrong, how to update the position of the marker after it was created for the first time?

<custom-marker
                v-for="(marker, index) of markers"
                :key="marker.id"
                :marker="marker"
                :position = "marker.position"
            >

Is this the correct way in which I must send to update the position?

I am using the same component markerPlaces code.

I am very new to this, thank you very much for your help. I know my question is very silly but I see that you have done it in a very good way.

[thanhthaohoang]

@ulises58 To update the marker position, you can change the value of marker.position that you send as a value prop in your child component custom-marker. Did you try this before ?

[ulises58]

@thanhthaohoang 0.0 Don't you mean something like this?

props: ['marker','position'],
       // When Google Maps is ready
       async googleMapsReady () {
           //https://pastebin.com/VYMCvS9m
           console.log(this.marker.position)
           const options = await Object.assign(this.opt, {
               position: this.marker.position,
               icon: {
                   url: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png',
                   scaledSize: new window.google.maps.Size(25, 32)
               }
           }, this.$props)

           options.map = this.$_map

           // Create Google Maps objects
           this.$_marker = new window.google.maps.Marker(options)
           // Bind the Vue props
           this.bindProps(this.$_marker, boundProps)
           // Emit the events from Google Maps
           this.redirectEvents(this.$_marker, redirectedEvents)
       },