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
264 stars 51 forks source link

CustomMarker not showing (v0.16.0) #154

Closed lyhong-appraisal closed 10 months ago

lyhong-appraisal commented 11 months ago

After I upgrade to v0.16.0 (from 0.15.0), all the CustomMarker that used to display are disappeared.

I tried to upgrade to v0.17.0 that's released 2 days ago but still not working. I currently rollback to v0.15.0 in order to fix this problem.

Here's an example of the errors:

Demo error: https://stackblitz.com/edit/nuxt-starter-y1e3nb?file=app.vue

HusamElbashir commented 11 months ago

Can you please share a minimal reproduction? You can use https://vite.new/vue

lyhong-appraisal commented 11 months ago

Can you please share a minimal reproduction? You can use https://vite.new/vue

I updated the description.

HusamElbashir commented 11 months ago

I updated the description.

That repro link only has an empty GoogleMap component it doesn't show your issue

lyhong-appraisal commented 11 months ago

That repro link only has an empty GoogleMap component it doesn't show your issue

Somehow it did not save correctly. Now I updated. Please check again.

By the way, I found out that the error on occur for async data. For static data, it works perfectly. Please pay attention to that.

sagenate24 commented 11 months ago

Im seeing the same issue on v0.17.0. CustomMarker elements are not added to the map (Works fine on v0.15.0).

Nuxt v3.4.2 (ssr) Vue v3.3.4

  <GoogleMap
    api-key="apiKey"
    class="Locator__map"
    :center="center"
    :zoom="4"
    :zoom-control="true"
    :disable-default-ui="true">
    <CustomMarker
      v-for="(item, index) of list"
      :key="index"
      :options="{ position: { lat: parseFloat(item.lat), lng: parseFloat(item.lng) }, anchorPoint: 'BOTTOM_CENTER' }">
      <div
        class="Locator__marker"
        @click="selectItem(item)">
        <p>{{ index }}</p>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="35"
          height="40.51">
          <path
            d="M17.5 0A17.5 17.5 0 0 0 0 17.5c0 13.82 17.5 23.01 17.5 23.01S35 31.31 35 17.5A17.5 17.5 0 0 0 17.5 0"
            :fill="(activeItem === item.id) ? '#1bac69' : '#747f86'" />
        </svg>
      </div>
    </CustomMarker>
  </GoogleMap>
HusamElbashir commented 10 months ago

Fixed in v0.17.1