search

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

Feature: HtmlMarkers #23

Closed daniel-de-wit closed 2 years ago

daniel-de-wit commented 3 years ago

Using a CustomOverlay it's possible to mimic the behaviour of a marker while adding the ability to render html using a slot.

The eregnier/vue2-gmap-custom-marker plugin for diegoazh/gmap-vue has this working (demo). Unfortunately this is all written in Vue2 and not usable in Vue3.

I've tried porting the plugin myself but my JS skills are very limited.

Is there any chance this wonderful package will support this feature in the future?

HusamElbashir commented 3 years ago

Hello @daniel-de-wit

We're certainly looking to expand our feature set. This library was created to address our immediate needs for using basic mapping features with Vue 3. Our focus right now is on fixing any bugs with the initial feature set before adding any new features though.

ribrewguy commented 2 years ago

Any movement on this? Only having simple markers is awfully limiting. It would be massively helpful to add custom markup in the markers themselves.

web-programmer-here commented 2 years ago

+1 for this feature

HusamElbashir commented 2 years ago

Yeah I realize this is quite a useful feature to have. Will have a go at it when things cool off a bit at work. PRs welcome in the meantime 🙂

web-programmer-here commented 2 years ago

@HusamIbrahim @ribrewguy @daniel-de-wit I contacted the author of that library and he created a library for this package https://github.com/eregnier/vue3-gmap-custom-marker

HusamElbashir commented 2 years ago

Appreciate the initiative @web-programmer-here! And kudos to @eregnier for creating this. Really appreciate your support sir 🙏

web-programmer-here commented 2 years ago

@HusamIbrahim any chance this feature can be added to the library itself without additional libraries? thanks

HusamElbashir commented 2 years ago

Probably at some point @web-programmer-here. The native API allows for some decent customization level and only when custom markup is really necessary does this feature become useful. Using your sandbox from the plugin repo as an example: https://codesandbox.io/s/nice-newton-yjgijf?file=/src/frontend/components/Content.vue

web-programmer-here commented 2 years ago

Thanks @HusamIbrahim. I need to wrap the image tag in a div

tylerclark commented 2 years ago

+1

web-programmer-here commented 2 years ago

@HusamIbrahim any chance you can add this feature too when you have time? thanks

HusamElbashir commented 2 years ago

Added in v0.12.0 https://github.com/inocan-group/vue3-google-map#custom-marker

web-programmer-here commented 2 years ago

@HusamIbrahim amazing work