The alternative to a seperate marker would be when mousing over the pin a small pop up with basic details is displayed.
@Andy_Lamb Sounds interesting! Could you please describe what basic info would you like to include in this popup?
2 Likes
I think something like a small pic but that isn’t necessary, but would make it more visual, and one bold line which is the title and perhaps the first line of the first paragraph of the description with a read more link. This is basically in place, with more description and booking buttons when you click, but if browsing many pins clicking and clicking again to close looses much of the joy of this great widgets functionality. I hope that helps 
2 Likes
Hi @Andy_Lamb 
We’ve tried to create a custom popup on hover. Here is our test widget - https://dcc6361c0d864a5eb493180c39dd476a.elf.site/.
Please check it out and if you like the result, we’ll copy this version to your widget 
2 Likes
OMG Max! That is amazing and exactly what I was thinking of I think for users of this widget this functionality will be a big hit. Thank you so much for working on this and I must say that I am 100% blown away by how reactive you are and how engaged with the users and community. For me, having dealt with many companies across many disciplines you guys stand heads above all others with regard to customer service. Thank you so much!
4 Likes
Thanks a ton for such a lovely feedback - I’ll definitely pass your kind words to the dev team 
By the way, I’ve added this code to the Custom JS field on the Settings tab of your South Wales Hikes widget’s settings:
const CONFIG = [
{
id: 'm79g5ifx',
place_name: 'Waterfall Country',
place_address: '2 High St, Pontneddfechan, Glynneath, Neath SA11 5NP, UK',
name: 'Waterfall Country Brecon Beacons',
description:
'<div><strong>Sgwd yr Eira</strong> is one of the most famous and breathtaking waterfalls in <strong>Waterfall Country</strong>, located...</div>',
image:
'https://service-widget-data-prod.sfo3.digitaloceanspaces.com/places-photos/4f1ddd2bd5c3f217d43388a10e2379b4.jpg'
},
{
id: 'm79ftmkh',
place_name: 'Pen y Fan',
place_address: 'Pen y Fan, Brecon LD3 8NE, UK',
name: 'Pen y Fan',
description:
'<div>Pen y Fan is the highest peak in South Wales, standing at <strong>886 meters (2,907 feet)</strong> in the <strong>Brecon ...</div>',
image:
'https://service-widget-data-prod.sfo3.digitaloceanspaces.com/places-photos/6993f34dd6f427fd0fe03bced66e0afb.jpg'
},
{
id: 'm79gawt5',
place_name: 'Henrhyd Falls',
place_address: 'Dol Henrhyd, Coelbren, Neath SA10 9PH, UK',
name: 'Henrhyd Falls',
description:
'<div><strong>Henrhyd Falls</strong> is the tallest waterfall in South Wales, located in the beautiful <strong>Brecon Beacons N...</div>',
image:
'https://service-widget-data-prod.sfo3.digitaloceanspaces.com/places-photos/b03102ea87230302936c8dc5ea55ff38.jpg'
},
{
id: 'm79g13uu',
place_name: 'Symonds Yat',
place_address: 'Symonds Yat, Ross-on-Wye HR9, UK',
name: 'Symonds Yat',
description:
'<div>The <strong>Wye Valley Walk</strong> is a stunning long-distance trail following the <strong>River Wye</strong>, stretching <strong>136 mi...</div>',
image:
'https://service-widget-data-prod.sfo3.digitaloceanspaces.com/places-photos/a383578b2f8446874bea479944bf8c33.jpg'
},
{
id: 'm79fzvxq',
place_name: 'Fan Fawr',
place_address: 'Fan Fawr, Brecon LD3 8SU, UK',
name: 'Fan Fawr',
description:
'<div>Private hikes in the Brecon Beacons with Wales Outdoors. These hills are a taster. You can book ...</div>',
image:
'https://service-widget-data-prod.sfo3.digitaloceanspaces.com/places-photos/5f292d2177c95bccba4b07adf185a407.jpg'
},
{
id: 'm79fz0pb',
place_name: 'Hay Bluff',
place_address: 'Hay Bluff, Hereford HR2 0PX, UK',
name: 'Hay Bluff',
description:
'<div>Private hikes in the Brecon Beacons with Wales Outdoors. These hills are a taster. You can book ...</div>',
image:
'https://service-widget-data-prod.sfo3.digitaloceanspaces.com/places-photos/82501796dddaa3c87901076e573cbba1.jpg'
},
{
id: 'm79fxt0k',
place_name: 'Ysgyryd Fawr',
place_address: 'Ysgyryd Fawr, Abergavenny NP7 8EN, UK',
name: 'Ysgyryd Fawr',
description:
'<div>Private hikes in the Brecon Beacons with Wales Outdoors. These hills are a taster. You can book ...</div>',
image:
'https://service-widget-data-prod.sfo3.digitaloceanspaces.com/places-photos/193278a35a2a620b0e825e587758f739.jpg'
},
{
id: 'm79fwkj6',
place_name: 'Llyn y Fan Fach',
place_address: 'Llyn y Fan Fach, Llangadog SA19 9UN, UK',
name: 'Llyn y Fan Fach',
description:
'<div>Private hikes in the Brecon Beacons with Wales Outdoors. These hills are a taster. You can book ...</div>',
image:
'https://service-widget-data-prod.sfo3.digitaloceanspaces.com/places-photos/21cd0576324bf08afb5be590846269c5.jpg'
},
{
id: 'm79fun47',
place_name: 'Ogmore-by-Sea',
place_address: 'Ogmore-by-Sea, Bridgend CF32, UK',
name: 'Ogmore-by-Sea',
description:
'<div>Private hikes in the Brecon Beacons with Wales Outdoors. These hills are a taster. You can book ...</div>',
image:
'https://service-widget-data-prod.sfo3.digitaloceanspaces.com/places-photos/e6f37b35f8e5200f7750ecdef9dee8a9.jpg'
}
];
function listener(selector, callback) {
const firstTarget = document.querySelector(selector);
if (firstTarget) {
return callback(firstTarget);
}
const observer = new MutationObserver((_, observer) => {
const targetNode = document.querySelector(selector);
if (targetNode) {
observer.disconnect();
callback(targetNode);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
function createElement(tag, options) {
return Object.assign(document.createElement(tag), options);
}
function getMarkerPosition(marker, mapContainer) {
const mapRect = mapContainer.getBoundingClientRect();
const markerRect = marker.getBoundingClientRect();
const x = markerRect.left - mapRect.left;
const y = markerRect.top - mapRect.top;
return { x, y };
}
listener('.maplibregl-canvas-container', (mapContainer) => {
const map = mapContainer.querySelector('.maplibregl-canvas');
setTimeout(() => {
CONFIG.forEach((data) => {
const wrapper = createElement('div', {
style:
'width: 300px;display: flex;align-items: center;justify-content: flex-start;flex-direction: column;background: rgb(255, 255, 255);overflow: hidden;padding: 12px;border-radius: 12px;position: absolute;left: calc(-150px + 19px);bottom: 54px; opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 2;'
});
const image = createElement('img', {
src: data.image,
style: 'width: 100%;border-radius: 6px;margin-bottom: 12px;'
});
const title = createElement('div', {
textContent: data.name,
style: 'font-size: 16px;font-weight: 600;margin-bottom: 6px;'
});
const address = createElement('div', {
textContent: data.place_address,
style: 'font-size: 12px;font-weight: 400;margin-bottom: 12px;'
});
const description = createElement('div', {
innerHTML: data.description,
style:
'display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 3em; line-height: 1.5em; font-size: 14px; font-weight: 400;'
});
wrapper.append(image, title, address, description);
const block = document.querySelector(`.elfsight_map_1_${data.id}`);
if (!block) {
return;
}
block.addEventListener('mouseover', () => {
wrapper.style.opacity = '1';
wrapper.style.pointerEvents = 'all';
block.style.zIndex = '2';
const { y } = getMarkerPosition(block, map);
if (wrapper.offsetHeight > y) {
wrapper.style.bottom = 'auto';
wrapper.style.top = '54px';
} else {
wrapper.style.bottom = '54px';
wrapper.style.top = 'auto';
}
});
block.addEventListener('mouseleave', () => {
wrapper.style.opacity = '0';
wrapper.style.pointerEvents = 'none';
block.style.zIndex = '1';
});
block.prepend(wrapper);
});
}, 1000);
});
Now the popup appears in your widget too. Would you like to show the popup for the South Wales Hikes widget only or for other Store Locators too?
1 Like
I’d like that but this is a fair bit of work for you and the pins will change and evolve over time so best for me to work out how to adapt the code for new pins?
Am I right in thinking that I can add this code with new details of a new pin?:
{
id: ‘m79ftmkh’,
place_name: ‘Pen y Fan’,
place_address: ‘Pen y Fan, Brecon LD3 8NE, UK’,
name: ‘Pen y Fan’,
description:
‘
Pen y Fan is the highest peak in South Wales, standing at 886 meters (2,907 feet) in the Brecon …
’,image:
‘https://service-widget-data-prod.sfo3.digitaloceanspaces.com/places-photos/6993f34dd6f427fd0fe03bced66e0afb.jpg’
},
The pointing in the right direction I need therefore would be where do I find the id and also the image address?
1 Like
Hi there, @Andy_Lamb
Yes, you just need to add the details for the new pins. Regarding the image link and the pin id, you can find them, using the Dev Tools.
Just right-click the image, choose Inspect and you’ll see the link for this image. After that, type “marker” to the Dev Tools search and the part appearing after elfsight-map-number is the ID of the marker.
I’ve recorded a video screencast showing how you can do this:
Please check it out and let me know if it helped
2 Likes
Thank you so much, when I look again at these I’ll follow your instructions
2 Likes
Great, you’re always welcome 