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
289 stars 58 forks source link

Cluster alike Component #12

Closed gdbhosale closed 3 years ago

gdbhosale commented 3 years ago

Hey guys, Thank you for this amazing library. Loved it.

There is a missing component "Cluster" which can make a cluster of Markers or polylines. That way it's possible to hide/show multiple polylines at once (cluster-wise).

Cluster Example in vue2 library: https://xkjyeah.github.io/vue-google-maps/all-components.html

As of now, v-if isn't a working option (especially when using v-if in v-for).

Code trying to show multiple trip markers and polylines.

<div v-for="(trip, index) in tripsAll" :key="index">
  <div v-show="trip.show">
    <Marker :key="index2" v-for="(route, index2) in trip.routeData" :options="route.marker" />
    <Polyline :key="index3" v-for="(route, index3) in trip.routeData" :options="route.polylines" />
  </div>
</div>

In the above example, v-show doesn't work neither does v-if in same place.

Let me know your view on this. Is there a way I can contribute to this project?

HusamElbashir commented 3 years ago

Hey @gdbhosale

You're right there's quite a few features missing from the library but unfortunately we don't have much spare time to work on it at the moment.

WRT v-show unfortunately that won't work because it relies on Vue adding a style display: none to the nodes to be hidden but the map elements are rendered by the Google Maps API and not Vue. v-if should work though because it does trigger creation/destruction of our components which act as a proxy to call the corresponding create/remove logic using the Google Maps API. If you do find a bug please share a reproduction link on CodeSandbox and I'll take a look.

Is there a way I can contribute to this project?

Any contribution is welcome. If you think you can implement a particular feature or fix a bug please open a PR.

gdbhosale commented 3 years ago

Above toggle issue resolved with v-if in version 0.5.2. Thank you !!!