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.

Here's a tip for Pro Plan users on how to change the appearance of hyperlinks in hotspot content.

You can change the look of each link individually by editing its HTML on the Edit Hotspot Content page, but if you want them all to look the same without editing each one, do this. Choose Tour > Custom HTML from the Tour Builder menu, and then copy/paste the CSS shown below into the CSS section.

#maTextArea a {
   font-family:Verdana, Arial, Helvetica, Sans-Serif;
   font-size:18px;
   font-weight:bold;
}

#maTextArea a:link {
   color:pink;
   text-decoration:none;
}

#maTextArea a:visited {
   color:yellow;
   text-decoration:none;
}

#maTextArea a:hover {
    color:green;
   text-decoration:underline;
}

You'll probably want to edit my CSS to suit your taste. I chose options that make it easy to see what's going on. Hyperlinks appear in pink if they have never been visited and yellow if they have been. They appear in green when you move the mouse over them. They are normally not underlined except when you mouse over them (that's what the text-decoration attribute controls). Note that I also made the font large (24px) and bold.

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 tip won't work.

To learn about the #maTextArea class and other ways to use CSS in your tours, see section 6.4 of the MapsAlive user guide for the JavaScript API.

The MapsAlive gallery feature is a great way to display still photographs, but did you know that you can also use it for video and other multimedia? On my own personal photography site, I use a gallery to display 360° panoramic images (see screenshot below). When you click on a thumbnail in the gallery, its panorama displays so that you can pan and zoom it. You can see how it works here.

Show a Panorama When a Marker is Clicked

When you use still photos in a gallery, the photo changes as soon as you mouse over its marker. That will happen with the panoramas too, but it's probably not the behavior you want since they can take a few seconds to load. So we changed the markers to show their content (the panorama) when clicked instead of when moused over. You do that by going to the Hotspot Actions screen and choosing the Marker is clicked radio button for the Show this hotspot's content when option.

Unfortunately, that causes a small problem. Even though the content does not change when you mouse over a marker, the marker under the mouse appears as selected (in the example above the selected marker has a red border). That means that the panorama being displayed can get out of sync with the marker that is showing as selected. We can fix that with a few lines of JavaScript and by changing the markers to be static.

Static Markers

A static marker does not change its appearance when you move your mouse over it. It does, however, still show its tooltip and it still performs its mouse actions, in this case, the click action. You make a marker static when you want more control over when its appearance changes. For this gallery, we only want a marker to appear as selected after it has been clicked. To make a marker static, just check the Is Static box on the Advanced Hotspot Options screen.

A Little Bit of JavaScript

After we made all the markers static, we went to the Custom HTML screen and typed the function shown below into the JavaScript text box. You can read about the maOnHotspotChanged function in the user guide for the JavaScript API, but briefly, it gets called whenever a new hotspot is selected. So it gets called when you click on a marker, but not when you simply mouse over it.

The code we added to the function only does two things. First, it sets the appearance of all the markers to normal. We do this in order to remove the selected appearance from whichever marker is currently selected. Second, it makes the marker that was just clicked appear as selected. Here's the code:

In the first statement, the "*" is wildcard notation meaning all markers. You can use it instead of typing a list of every marker's hotspot Id. Note that you need to have a MapsAlive Pro Plan to use the Custom HTML feature, but if you only have a Plus or Personal plan, you can put the JavaScript in the web page that contains the tour itself.

Also Works with Maps

The example discussed here uses a gallery, but everything would work the same way with a map. For example, suppose you wanted to display panoramas showing vistas at various points along a hiking trail. You would use a hiking trail map and your favorite marker symbol (maybe an arrow or some little feet) and have each marker display its panorama when clicked. Or you could have some of the markers display panoramas and some display still photos or videos.

Works on iPad and iPhone

We use a panorama player that works on PCs, Macs, iPad, and iPhone. Since MapsAlive galleries and maps also work on all those devices, you can be sure that everyone will be able to enjoy your tour.

Hi everyone. We've just added a new page to the MapsAlive web site devoted entirely to interactive restaurant menus. We've also created 12 samples showing different ways that menus can look, behave, and be integrated with your web site.

Here's a screenshot showing one of the samples:

Why do interactive menus work so well?

An interactive restaurant menu looks just like the menu you already have on your web site with one big difference. Your current menu just sits there, but an interactive menu displays a photograph of each food item when you move your mouse over an entrée name – or when you touch it on an iPhone, iPad, or other mobile device. When I demonstrate an interactive menu to someone I hear the same response nearly every single time: "Hmmm, that’s making me hungry!" And they’re not just saying that.

It's a well known fact that people experience a physical sensation in response to a visual stimulus that reminds them of something pleasurable, like food!  By adding an interactive menu to your web site, you can take advantage of human nature as part of your marketing efforts. There’s probably no other single improvement you can make to your web site than to show off your cuisine with photographs.

Where to find the samples

To try any of our 12 new working examples of interactive restaurant menus, and to see a step-by-step tutorial on how to create one, visit http://www.mapsalive.com/LearningCenter/RestaurantMenus.aspx.

Now you can add interactive maps, floor plans, photo Galleries, or interactive restaurant menus – anything created with MapsAlive – to your Facebook business page. You use the same iFrame code that you would use if you were embedding your map in your own web page. Suddenly your Facebook page becomes a powerful marketing tool without costing you anything.

How does this work?

Facebook recently made it really easy to display any kind of content using an iFrame application. An iFrame application lets you display any web page on a Facebook tab. You can have up to twelve custom tabs and you can display interactive content or any HTML, CSS and JavaScript. Just be sure your interactive map or other content is 520 pixels wide or less if you want to avoid horizontal scroll bars.

Here's how to add an interactive map to a Facebook tab

First you add a free application called "Static HTML: iframe tabs" to your business page. Then you add your interactive map or other content to the tab and customize it. Follow these easy steps to make this work.

The new tab for the code shown in Figure 3 displays a fully interactive floor plan and looks like this:

Note that if your interactive map uses popups they will only display within the bounds of the iframe. For many maps this is not a problem, but you might want to consider using a tiled layout like the example here to be sure viewers can see all of your hotspot content.

Here are some other ways to customize your new tab:

To rename the tab — go to your business page and click Edit Page and then choose Apps from the list of tabs on the left. Find Static HTML: iframe tabs in the list of Apps and click Edit Settings.

To change the position of the tab in the list — while viewing your page, click Edit at the bottom of the tab list on the left. Drag the tab name up or down.

Add another custom tab — while editing a custom tab, click the gold FAQ & Help Center link at the top of the page (Figure 3). Expand "How do I add more than one tab" and click on Second tab (or Third, etc.). There are other good tips and instructions for using custom tabs in this section as well.

Let the interactive map experts do it for you

Here at MapsAlive we live, breath, and eat interactive maps, floor plans, diagrams, and photo galleries. If you want to add interactive floor plans or maps to your web site, but you just don't have the time to do it yourself, let us help. We can do a little or a lot – whatever you need.

How we can help you

Depending on your needs and budget we can work with you in any of these ways:

So much to do, so little time

• Set up a framework and hand it over to you to add your content. We do the heavy lifting and you do the fine-tuning.
• Deliver a full interactive map solution ready to integrate into your web site. You provide the specification or we can work with you to develop one.
• Create custom shapes for things that are already on your map like sales territories or building outlines.
• Programming in JavaScript, HTML, and CSS to make your interactive maps do something really special.
• Figure out a solution for how your map should work and how you can best integrate it with a larger overall solution.

How it works

You tell us what you want and how much you can afford to spend. You also provide us with your map images, photos, text – anything you want for your clickable map. We put it all together, test it on the major browsers and on iPad and iPhone, and then hand it back to you to add to your web site. Usually a few phones calls and emails is all it takes for small jobs. You get a high quality result that you can maintain yourself when changes are needed.

To learn more, vist the custom services page on the MapsAlive web site.

Make Your Restaurant Stand Out from the Crowd

If you have a restaurant (or you are a web developer who does web sites for restaurants) consider making your menu interactive. Every day, hungry people use the web to decide where to have lunch or to plan a special dinner. An interactive menu gives your establishment an edge over the competition because visitors to your web site not only see your menu, they see mouth watering photos of your food. When people can see what you have to offer, there's a good chance that they'll walk through your door.

How Interactive Restaurant Menus Work

An interactive menu can be the same as your printed menu or your existing web site menu. The big difference is that when someone moves their mouse over (or touches) an entrée, a photograph of that entrée appears.

To get the idea, see the screen shot below.

Do It Yourself or Have Us Make Your Menu Interactive For You

Creating an interactive menu is easy with MapsAlive. Here are the basic steps.

• Create a new tour with MapsAlive.
• Upload an image of your menu.
• Pick the kind of marker you want to use for the hotspot – a transparent rectangle works well.
• Upload a zip file of your food images. MapsAlive automatically creates a hotspot for each entrée.
• Place your markers on the appropriate menu locations.
• Preview and publish your tour and put it on your web site!

If you are too busy serving delicious food to your customers, send your menu and photos to us and we can do it for you.

Works on iPad and iPhone too

Your new interactive menu will work on PC and Mac browsers, but it will also work on iPad, iPhone, and Android devices. That means that people on the road will be able to see what you have to offer and be enticed to visit you in person.

To try working examples of interactive restaurant menus and to see a step-by-step tutorial on how to create one, visit http://www.mapsalive.com/LearningCenter/RestaurantMenus.aspx.

Bon Appetit!

In this article I'm going to tell you how you can launch a web page with one touch of an app icon on your iPad or iPhone. This not only saves you the steps of launching Safari and typing a URL (see left image below), but your page will come up in full-screen mode (see right image below). It works with interactive maps, interactive floor plans, or interactive photo Galleries (as shown here) that you create with MapsAlive.

Left: Web page shown in Safari.   Right: The same page launched as a web app.

Apple describes this feature as making a web page “web app capable.” Notice how much extra room is available to the map when launched as a web app thanks to the absence of the address bar at the top and the icon bar at the bottom.

Two easy steps

Making a map web app capable only takes a minute. The first step is to allow the interactive map to be launched with one touch and the second is to create an app icon for your home screen. Both steps are described below.

Step 1 – Make the map web app capable

1. Go to the Tour Manager screen in the MapsAlive Tour Builder.
2. Check the box that says Make Tour Web App Capable.
3. Preview and publish your map.
   
   

Step 2 – Create an app icon for the map’s URL.

1. Launch Safari and enter the URL for the map.
2. Wait for the map to load.
3. Tap the icon that looks like an arrow coming out of a box. On iPad it’s at the top of the screen (see top image at right). On iPhone it’s at the bottom.
4. Choose Add to Home Screen.
5. An Add to Home dialog appears (see bottom image at right). Type a short name for the app icon.
6. Click the Add button.
7. An icon that looks like the map then appears on your home screen.
8. On your home screen, touch the new icon and the map will launch with no address bar.

If you want to get rid of an app icon that you have created this way, just press on the icon until it starts to vibrate and an X appears next to it. Touch the X to remove the icon from your home screen.

I hope you have fun with this — enjoy!

GoodReader for iPad

Here's a great tip that came from one of our customers who needed to use his interactive map without internet access. This is great when you are on the road in low techsville.

Here's how it works. You copy all the files for your interactive map onto your iPad into an app called GoodReader. You can then use GoodReader's built-in browser to view them. Since the files are already on your iPad, there's no need to get them from the internet. Follow the steps below and your map will be installed and running on your iPad internet-free in a few minutes.

1. First make sure your tour has been enabled to run on your iPad. You do this by checking the Enable Mobile Internet Options box on the Tour Manager screen in MapsAlive.
   
   
2. Now get the files for your interactive map. In the MapsAlive Tour Builder, choose Tour > Export and then click Download Published Tour. This gives you a zip file containing everything you need.
   
   
3. If you don't have it already, buy and install GoodReader for iPad ($4.99 from the iTunes Store).
   
   
4. With your iPad connected to your Mac or PC, open iTunes, select your iPad from the Devices section, and then click Apps in the top menu bar. Then click on GoodReader in the File Sharing section near the bottom of the screen.
   
   
5. Drag your zip file onto the GoodReader Documents section or click the Add button to browse for it. This copies the zip to your iPad. I tried this on a PC and am assuming it works the same on a Mac. If not, someone please let me know.
   
   
6. Now launch GoodReader on your iPad. The zip file will appear in the My Documents section on the left. When you touch the file name, GoodReader will prompt you to unzip it. Note that if there is a circle to the left of the file name, then touching the file name only selects it. In that case, touch the Unzip button in the Manage Files pane on the right and then click the blue Done button.
   
   
7. GoodReader will create a folder having the same name as the zip file. Touch the folder name to see the files in the folder. If there is a circle to the left of the folder name, touching the name will only select it so first click the Done button in the Manage Files pane, then touch the folder name to open it. At this point you can delete the zip file if you like.
   
   
8. Inside the folder locate the file named index.htm. It's the HTML page that launches your interactive map.
   
   
9. Touch index.htm and your interactive map will display in the GoodReader browser. To make it easier to find this file the next time, you could rename it to __index.htm so that it will sort at the top (that's two underscores in front of the file name).
   
   
10. To prove that your interactive map will work without Wi-Fi or 3G, put your iPad into Airplane Mode. GoodReader will display a dialog telling you to turn it off, but just press OK.

I was really happy to learn of this solution and hope you will find it useful. If you have a good tip like this that you think other MapsAlive users would like to see, please send it to us.

Enjoy!

The team here at MapsAlive is pleased to announce the first beta release of MapsAlive for the mobile internet. The interactive maps and floor plans you create with MapsAlive will now work on both desktop and mobile browsers. We currently support these mobile devices: iPad, iPhone, and iPod touch running OS 4.3 or higher, as well as other mobile devices such as Android devices.

How Interactive Maps Work on the Mobile Internet

When you publish a MapsAlive tour with mobile internet enabled, the map automatically detects whether it is running on a mobile browser or on a desktop browser. On mobile devices the map displays using HTML5 and on desktop browsers it uses Flash. It's the same map displayed the best way for the browser.

The 411 on HTML5 Versus Flash

Until recently most web pages that displayed interactive or animated graphics used a proprietary technology from Adobe called Flash. That is until Apple decided not to allow Flash on the iPad, a tablet that has been a phenomenal success. Enter HTML5, a non-proprietary web standard (well almost) that is supported by Safari, Firefox, Chrome, Opera, and IE9.

HTML5 works great on the iPad, but it doesn't work on IE 6, 7, or 8 which together had more than 46% of market share as of March 2011. What this all means is that if you want the millions of iPad and iPhone users to be able to view your interactive maps and you want your maps to work on legacy desktop browsers, you need a technology that supports both Flash and HTML5. You need MapsAlive for the Mobile Internet.

Become a Beta Tester

We invite you to become a beta tester and be the first on your block to have interactive maps working on your iPad or iPhone.

MapsAlive now supports iPad, iPhone, and Android

Support for mobile devices has been officially released. To learn more please visit http://www.mapsalive.com/Features/Mobile.aspx.