Making the MapsAlive directory visible on Android browsers

Not all mobile browsers are created equally. On some Android browsers the MapsAlive directory does not scroll which means the entries toward the end of a long directory are not visible because you can't scroll them into view. You can get around this by making the entire directory visible so that no scrolling is needed. You do this with a little bit of JavaScript code that we provide here.

If you have a Pro Plan you can add the code to the JavaScript section on the Tour > Custom HTML screen. If you have a Personal or Plus Plan you can use the same code, but you will have to include it in the web page that contains your interactive map.

First, you need to detect whether your interactive map is running on an Android browser. Then you can change the behavior of the directory so that all of the entries are visible.

Here is the code:

function maOnMapLoaded()
{
   if (maUaIs("android") || maUaIs("skyfire"))
   {
      var dir = document.getElementById("maDirContent");
      dir.style.maxHeight = "none";
   }
}

The maOnMapLoaded() function is automatically called when your map is loaded in the browser and is ready to communicate with. The maUaIs() function lets you check for a specific browser by examining the user agent string. A user agent string identifies the browser name, version number, and other system details. So, in this case it checks to see if the user agent is "android" or "skyfire". (Skyfire is an Android browser, but for some reason does not identify itself as an Android browser so we check for it separately).

If the map is running on an Android browser, the code overrides the maximum height of the directory so it can fully expand and display all of its entries.

IMPORTANT: If your tour is directly embedded in a web page and you are using Custom HTML to add the code, be sure that your embed code includes custom.js. You can get the <script> tag to include it from the Code Snippets section on the Tour Preview page. If you don't include custom.js, your custom HTML won't be part of your tour and this solution won't work.

To learn more about the maOnMapLoaded() function or other MapsAlive JavaScript functions see the user guide for the JavaScript API.