Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

is draggable option supported in CustomMarker? #131

Open
KunalKshatriya opened this issue Apr 14, 2023 · 4 comments
Open

is draggable option supported in CustomMarker? #131

KunalKshatriya opened this issue Apr 14, 2023 · 4 comments
Labels
feature request New feature

Comments

@KunalKshatriya
Copy link

Hi,
I am using in maps in my application where I wish show the custom marker and provide the drag functionality. I tried using CustomMarker with draggable option. But it seems not to be working.

Is there any workaround I can try?

Thanks

@HusamElbashir
Copy link
Collaborator

No this isn't yet supported but it's something we can add.

@HusamElbashir HusamElbashir added the feature request New feature label May 31, 2023
@wickedest
Copy link

What about AdvancedMarker, e.g. this?

@wickedest
Copy link

nvm - I was going about it the wrong way trying to get a ref (didn't work) and binding a listener to that, but had a eureka moment when I realized I could just bind the event.

<AdvancedMarker
	ref="markerRef"
	:options="{ position: center, gmpDraggable: true }"
	@dragend="onDragEnd"
/>

☝️ I think this would be handy to show examples of this somewhere. The documentation for events only says "You can listen for the following events...".

@scottix
Copy link

scottix commented Nov 5, 2024

I was in the same boat but I got it to work by overriding the content

const markerOptions = computed(() => {
  if (!siteForm.lat || !siteForm.lng) return {};

  return {
    position: { lat: siteForm.lat, lng: siteForm.lng },
    gmpDraggable: true,
    content: createCustomPin()
  }
});

const createCustomPin = () => {
  const img = document.createElement('img');
  img.src = '/imgs/google_map_pin.png';
  img.style.width = '100%';
  img.style.height = '100%';
  return img;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature
Projects
None yet
Development

No branches or pull requests

4 participants