How to expand Google Maps location panel on mobile

By default, the location panel in Google Maps widget is collapsed on mobile, showing only 1 location from the list. However, if you prefer to have it expanded right from the start, we are happy to provide you with a solution for that.

To expand the location panel on mobile, you need to add the following script right after your widget installation code:

<script>
  const waitForElement = (selector, callback, step, limit) => {
    const currentStep = step || 300;
    const currentLimit = limit || 5000;
    let remainingTime = currentLimit;
    const intervalId = setInterval(function () {
      const targetElement = document.querySelector(selector);
      if (targetElement || remainingTime <= 0) {
        clearInterval(intervalId);
        if (targetElement && typeof callback === "function") {
          callback(targetElement);
        }
        return;
      }
      remainingTime -= currentStep;
    }, currentStep);
  };

  waitForElement(".eapps-google-maps-map-container", (block) => {
    const widgetBlock = block.closest("[class*='elfsight-app']");
    const isOpened = widgetBlock.classList.contains(
      "eapps-google-maps-bar-opened"
    );

    if (!isOpened) {
      widgetBlock.classList.add("eapps-google-maps-bar-opened");
    }
  });
</script>

This is how it should look once you've integrated this code next to the installation code of your widget:

This is the default appearance of the widget on mobile devices prior to adding the script:

And here is how it will appear after you add the script:

Well done. You've now learned how to expand the location panel of your Google Maps on mobile devices!