Change marker icon on click

[adambradford]

Hi,

When a user clicks a marker to reveal the info window, is there a way to make the clicked marker icon change to a different image? (Basically the same except a different color?)

Then change back to normal status if the user clicks a different icon?

Thanks.

Adam.

[AbelC]

Hi Adam,

Thank you so much for getting in touch with us.

Unfortunately, this is not supported by default at the moment. We do apologize for the inconvenience.

With that said, this can be achieved with Custom JS.

Could I kindly ask if you could please provide us with a link to your map page?

Could you also please confirm the marker icon to be used when a user clicks on a marker?

I will then be able to provide you with Custom JS needed to achieve this.

I hope this helps clarify, and I look forward to hearing back from you.

Kind Regards,
Abel

[adambradford]

This reply has been marked as private.

[AbelC]

Hi Adam,

Thank you for letting me know, and not a problem at all.

I look forward to hearing back from you and assisting you further.

Kind Regards,
Abel

[adambradford]

This reply has been marked as private.

[adambradford]

This reply has been marked as private.

[AbelC]

Hi There,

Thank you so much for getting back to me.

I will prepare the code needed to achieve this and get back to you as soon as possible.

Kind Regards,
Abel

[AbelC]

Hi There,

Thank you for your time on this one.

I have now added the custom JS (Maps -> Settings -> Advanced Settings) needed to achieve this.

Could you please confirm if this is working for you?

I look forward to hearing back from you.

Kind Regards,
Abel

[adambradford]

Hi Abel,

This is amazing! Thank you so much.

The only minor problem is that the swapped (yellow) image shows up as twice the dimensions of the regular one. The two files are identical in size – I suspect it is related to the fact that I ticked the “retina ready” box for the regular one, which effectively halves the dimensions of the image when displayed. Presumably we need to make some kind of similar provision in your JS ?

If this isn’t possible, as a workaround, I could simply swap the image file for one half the size! Would be nice to have the retina one though.

Thank you.

Adam.

• This reply was modified 2 years, 8 months ago by adambradford.

[AbelC]

Hi Adam,

Thank you for letting me know.

Unfortunately, it is not supported to change the image size of the marker icon with custom JS at the moment.

Would it perhaps be possible to please upload a smaller image file and please confirm the URL to this new image?

Could I also kindly ask if you could please upload a smaller image of the default icon as this icon will then be used when the user closes the InfoWindow?

This will be a tremendous help!

I hope this helps clarify, and I look forward to hearing back from you.

Kind Regards,
Abel

[adambradford]

This reply has been marked as private.

[adambradford]

This reply has been marked as private.

[AbelC]

This reply has been marked as private.

[adambradford]

This reply has been marked as private.

[AbelC]

Hi Adam,

I have viewed your map page and it appears that you receive the following error in the console – Failed to load resource: net::ERR_NAME_NOT_RESOLVED.

This means that the marker icons is not displaying in the frontend. Could I kindly ask if you could please navigate to Maps -> Edit -> Advanced Settings -> Please re-upload the “Default Marker Image”.

Please do let me know if this resolves the issue you are currently experiencing?

I look forward to hearing back from you.

Kind Regards,
Abel

[Author]

Posts