Disable Scroll Zoom & Auto-Centering

[AdRod (Adrian Rodriguez U)]

Hi!

Would it be possible to add an option to disable zooming with the mouse scroll wheel when users hover over the map? This behavior can be frustrating for some users, especially when they’re simply scrolling down the page and accidentally zoom into the map instead.

On the other hand, when opening a store’s card, the map adjusts to focus on the location — which is great! However, once the card is closed, the map remains shifted. It would be ideal if the map could automatically return to its previous centered position to maintain spatial consistency.

Thank you very much for your time and consideration. I look forward to hearing your thoughts!

[AdRod (Adrian Rodriguez U)]

Correction: I’d like to disable the zoom option on the map so that it continues scrolling on the web and enable auto-centering of the map. Also, would it be possible to remove the yellow lines from the map and make it look like the Google Maps style?

[Max]

Hi there and welcome to the Community, @AdRod

1. To disable map zoom when scrolling, please add the code below to the Custom JS field on the Settings tab of your widget’s settings:

const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = root.querySelector(selector);

    if (component) {
      res(component);
    } else if (i !== 50) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

waitForElement("[class*='maplibregl-canvas-container']")
  .then(() => {
    const scrollElement = document.querySelector("[class*='maplibregl-canvas-container']");
    scrollElement.addEventListener('wheel', (event) => {
      event.stopImmediatePropagation();
    }, true);
    scrollElement.addEventListener('touchstart', (event) => {
      event.stopImmediatePropagation();
    }, true);
    scrollElement.addEventListener('mousedown', (event) => {
      event.stopImmediatePropagation();
    }, true);
    scrollElement.addEventListener('dblclick', (event) => {
      event.stopImmediatePropagation();
    }, true);
  });

2. Unfortunately, it’s impossible to move the focus to the previous position after closing the location popup. I’ve added this idea to the Wishlist on your behalf and if it gets more votes, we’ll try to think about it in the future - Move map focus to the previous position after closing the location popup

3. Do you mean these yellow lines? If this is the case, you can change their style using the Map Color Scheme on the Style tab:

Please try it out and let me know if it works for your case

[AdRod (Adrian Rodriguez U)]

Thanks a lot, Max!

Perfect, the script worked very well. I just disabled the last three. The only thing I wanted was the scroll bar, but it helps a lot. One question: is it possible for the double left click to continue zooming in, but for the double right click to zoom out?

And finally, I just want to change the very “forced” yellow line. I prefer the classic map like the one on Google Maps.

Example on a map from the store: Screenshot by Lightshot Example of a map I like on Google Maps: Screenshot by Lightshot

I look forward to your comments. Have a nice day!

[Max]

I’ll discuss with the devs if it’s possible to zoom out the map on the right click and will update you tomorrow.

Regarding the map styles, indeed Google Maps and Store Locator widgets are using different maps. At the moment, it’s impossible to use the map from the Google Maps widget in Store Locator, but we have this idea on the Wishlist. Feel free to upvote it - Make the map in the Store Locator widget look the same as in Google Maps.

The only workaround at the moment is to change the existing Map Color Scheme. Here is how the map looks with the Light Color Scheme:

[Max]

Hi there, @AdRod

Unfortunately, there is no way to zoom out the map using the right click. I’ve added this idea to the Wishlist and if it gets more votes, it might be considered in the future -Zoom out the map using double right-click