# Store Locator Default Map View on Mobile

**URL:** <https://community.elfsight.com/t/store-locator-default-map-view-on-mobile/78726>\
**Category:** Ask the Community\
**Tags:** store-locator\
**Created:** [October 27, 2024, 5:22pm UTC](https://community.elfsight.com/t/store-locator-default-map-view-on-mobile/78726 "2024-10-27T17:22:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Boxon](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@Boxon](https://community.elfsight.com/u/Boxon)\
**Post date:** [October 27, 2024, 5:22pm UTC](https://community.elfsight.com/t/store-locator-default-map-view-on-mobile/78726/1 "2024-10-27T17:22:36Z")

</div>

Is it possible to change the default view to ‘Map View’ instead of ‘List View’ on the Store Locator Widget?

---

<div class="post-metadata">

**Author:** ![Boxon](https://avatars.discourse-cdn.com/v4/letter/b/6bbea6/32.png) [@Boxon](https://community.elfsight.com/u/Boxon)\
**Post date:** [October 27, 2024, 5:37pm UTC](https://community.elfsight.com/t/store-locator-default-map-view-on-mobile/78726/2 "2024-10-27T17:37:16Z")

</div>

@Max Can you please add an option to select the default view on the mobile?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 28, 2024, 1:02pm UTC](https://community.elfsight.com/t/store-locator-default-map-view-on-mobile/78726/4 "2024-10-28T13:02:28Z")

</div>

Hi there, @Boxon 👋

We’ve added this code to the Custom JS field on the Settings tab of your widget’s setting to make the map view default on mobile:

```auto
function listener(selector, callback) {
  if (window.innerWidth > 480) {
    return;
  }

  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 });
}

listener(
  '[class*="mobile-layout__Container-sc"] [class*="FloatingButton__FloatingButtonContainer-sc"] [class*="ButtonBase__ButtonContainer-sc"]',
  (button) => {
    requestAnimationFrame(() => {
      button.click();
    });
  }
);

```

  

Check it out and let me know if you like the result 🙂

---

<div class="post-metadata">

**Author:** ![iammasterweb](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/iammasterweb/32/93576_2.png) [@iammasterweb](https://community.elfsight.com/u/iammasterweb)\
**Post date:** [December 8, 2024, 12:01am UTC](https://community.elfsight.com/t/store-locator-default-map-view-on-mobile/78726/5 "2024-12-08T00:01:41Z")

</div>

Hey @Max,

I’m thinking this code wouldn’t fix this issue, [View Map Button Issue - Mobile View](https://community.elfsight.com/t/view-map-button-issue-mobile-view/87567) ?

Best wishes,  
mw

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [December 9, 2024, 9:11am UTC](https://community.elfsight.com/t/store-locator-default-map-view-on-mobile/78726/6 "2024-12-09T09:11:08Z")

</div>

@iammasterweb Yep, this code helps display the map by default instead of the location list.

However, I’ve responded to you in [this thread](https://community.elfsight.com/t/view-map-button-issue-mobile-view/87567) 🙂