inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
296 stars 60 forks source link

Adjust the method 'InfoWindow' to customize #285

Open leeobrum opened 2 months ago

leeobrum commented 2 months ago

Today I can only add a few options with the content, for example:

<AdvancedMarker
    :key="i"
    v-for="(m, i) in markerOptions"
    :options="{ position: m }"
    @click="toggleInfoWindow(m)"
>
    <InfoWindow
        :options="{ content: sInfoContent }"
    />
</AdvancedMarker>

const toggleInfoWindow = (viewMarker: any) => {
  sInfoContent.value = (
    `<div style="text-align: center">
      <label style="margin-bottom: 5px">Data da Visita</label>
      <div style="margin-top: 5px">
        ${viewMarker.sData}
      </div>
    </div>`
  )
}

image

I would like to give the implementation idea, so we can change the title.

image