How to Add Interactive Maps to Facebook Custom Tabs

by Janice Kenyon 25. January 2013 09:32

You can add interactive maps to custom tabs in Facebook to create a richer experience for your followers. How about displaying an interactive map to show people where your offices or businesses are located? Or, add an interactive shopping mall map that lets users find stores, see shop hours or view promotions. Add any interactive map created with MapsAlive to a custom tab.

What are Facebook tabs? Tabs are extra pages that let you display more content about your business. Tabs appear as thumbnails just below your cover photo on your Facebook home page like this:

How to Add a Tab and Display an Interactive Map

To add a custom Facebook tab you must have a Facebook business page and be an administrator for that page. To learn how to create a Facebook business page go to https://www.facebook.com/business/build. You will also need to be a Facebook Developer. This isn’t as scary as it sounds – it’s really very simple and there is no programming required! If you aren’t already a Facebook Developer you can learn more here: http://www.mapsalive.com/Article/How-To-Become-A-Facebook-Developer.

Step 1: Create and Name your New App

In this example we will add an office locator map to our custom tab. Facebook calls the content that you display in your tab an App so we must create an app to contain the interactive map. First, go to the Facebook Developers page here:
https://developers.facebook.com/apps. Then click the + Create New App button in the upper left.

Type a name in the App Name field. You don’t need to enter anything for the App Namespace or check the Web Hosting box. Click Continue.

Enter the code in the Captcha box on the next dialog and click Continue.

Step 2: Enter Basic Information for Your App

Type a Display Name and a Contact Email.

Step 3: Tell Facebook Which MapsAlive Tour to Display on Your Tab

These instructions assume you have already created the interactive map you want to add to your tab. Because the width of a Facebook tab is 810 pixels, if you want your map to fill the entire width of the tab make your MapsAlive tour 810 pixels wide. You can display a tour that is narrower, but if it is wider it will be truncated on the right within the tab.

Choose Page Tab in the section called “Select how your app integrates with Facebook”

Type the title of your tab in the Page Tab Name field. Then paste in the URL for your MapsAlive tour in both the Page Tab URL field AND the Secure Page Tab URL field. You can get the URL for your tour on the Tour Preview screen in MapsAlive after you have published your tour.

These next steps are important!

  1. Type index.aspx after the slash following the tour number in both fields. (If the URL has page1.htm at the end, replace page1.htm with index.aspx)
  2. Change “http” to “https” in the Secure Page Tab URL field ONLY.

Click the Change link to upload a thumbnail image that users will see on your Facebook Home Page. For the best quality the thumbnail should be 111 pixels wide by 74 pixels high. Then click Save Changes.

Step 4: Add your Tab to Your Facebook Page

This step is a little awkward – Facebook does not seem to provide a “nice” way of doing this – but if you follow these instructions carefully you won’t have any trouble.

Open a new browser window and paste the following URL into the browser address bar:

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Replace “YOUR APP ID” with the id of the app you just created in step 3. You can find the id on the Settings page in the top section.

Replace “YOUR URL” with the Page Tab URL you specified above.

Now your URL should look something like: http://www.facebook.com/dialog/pagetab?app_id=591828130833214&next=http://tour.mapsalive.com/32772/index.aspx

Press return to visit that URL. (If you see the message You must have permission to add apps to at least one Facebook Page to perform the requested action it means you are not an administrator of a Facebook page. You can learn more here: https://www.facebook.com/help/323502271070625/.)

The Add Page Tab dialog lets you select a Facebook page for your new tab:

Select the page and click Add Page Tab.

Step 5: View your New Tab

Now go to your Facebook Home page. Click your new tab thumbnail below your cover photo. You can reorder the tab thumbnails by clicking the blue down arrow on the right of the thumbnails. Then hover over a thumbnail and click the small pencil that appears in the upper right of the thumbnail.

Once your interactive map has been added to your Facebook tab you can make changes to the map in MapsAlive, republish and your updates will automatically display the next time someone views the tab.

You can add more than one tab to display more interactive maps or other content as well. Visit MapsAlive on Facebook to see some of our examples.

Let us know if you have added your own custom tab with an interactive map – we’d love to see what you have created!

Embedding Interactive Maps with WordPress

by Janice Kenyon 14. January 2013 09:00

Many customers ask if they can include their interactive maps on a WordPress page. So long as you are using the WordPress.org software the answer is yes! This is the version of WordPress that you download and host yourself.

When you publish your interactive map in MapsAlive you can copy the HTML code you need to embed your map in your WordPress page and paste it into the editor on the Edit Post screen in WordPress.

In MapsAlive:

  1. Click the "Show Code Snippets" link on the Tour Preview screen.
  2. Copy the HTML code. You can use either the iframe method or the direct embedding method (see numbers 4 and 5 in the Code Snippets list). In this example we are using the code for the direct embedding method in number 5.

In WordPress:

  1. Go to the Edit Post screen.
  2. Click the HTML tab to switch to HTML view.

  3. Paste the code snippets that you copied from MapsAlive into the editor.
  4. Click Preview to see the interactive map.
  5. When you are done with your post click Publish. You can include text and images in the same post as your interactive map.

Be aware that if you are using the direct embedding method you can only embed one interactive map with this method on the same page. If you are using an iframe, you can embed as many interactive maps as you want on the same page. Or, you can embed one map using the direct method and the rest using an iframe.

Note: if your blog is hosted on WordPress.com you will not be able to include your interactive maps. This is because WordPress.com has limitations that automatically removes the HTML and script tags that you need to embed the map.

WordPress is web software you can download and use to create your own website or blog. The software is used by over 60 million people so being able to include your interactive maps is great news!

Finding Your Way Around the Airport with Interactive Maps

by Janice Kenyon 11. January 2013 11:40

Most of us love to travel, but if getting there and back requires flying we sometimes have to spend a lot of time in the airport. Usually we have either too little time or too much time to find our gate, get something to eat, buy the souvenir you promised, or (hopefully) claim our baggage.

Sea-Tac Airport, serving the Northwest and beyond, has added useful interactive maps to help ease your frantic rush or make a long layover more enjoyable.

 

The maps help you find your gate, locate shopping and dining options for when you do have extra time, and figure out which baggage carousel serves your airline. You can also use them to locate ground transportation and services like ATMs, vending machines or children's play areas.

The Sea-Tac website includes overview and detailed maps for each major area of the airport. The maps work on any browser and will run on mobile devices including the iPad and smart phones.

Finding what you need at Sea-Tac is now super easy, enjoyable, and a great use of MapsAlive.

Interactive Map Wins Baptist Communicators Association Award

by Janice Kenyon 8. May 2012 13:41

One of our longtime customers, the South Carolina Baptist Convention, recently won an award for their interactive map showing the facilities and activities at Camp McCall. The map displays a slide show of the many buildings and outdoor locations at the camp including the dining hall, chapel, cabins, the lake, and activities such as the ropes course and climbing wall. The map makes clever use of MapsAlive shape markers to highlight the buildings and locations as you move your mouse around the map. What a nice way to show off the camp and see what they have to offer!

The award was presented by the Baptist Communicators Association, a national organization of Baptist communicators in the fields of journalism, electronic media, audio, video, photography, Web sites, and other forms of communications.

The map, created with MapsAlive, won 1st place in the Web Application Category of the Interactive Media Division of the BCA Wilmer C. Fields Awards Competition. The competition is designed to encourage professional excellence among association members and to recognize those members who have done exemplary work.

Congratulations to Judy Ramsey, Randy Vincent, South Carolina Baptist Convention Communications & Mission Development Team!

New Feature - Import Marker Style

by George Soules 30. March 2012 16:51

MapsAlive has a new feature that makes the import mechanism even more powerful. When importing from Excel (or CSV or XML) you can now specify a MarkerStyle column to change the appearance of bound markers. Before this feature was added you had to manually edit the marker styles on the Edit Marker screen in the Tour Builder by selecting a new choice from the Marker Style dropdown. This will be a big time saver for people who have maps that depend on marker styles to visually indicate the status of a hotspot. For example, a map of houses for sale might show available properties in one color and sold homes in another.

Note that I said that this feature works with bound markers. A bound marker is what you get when you import marker shapes such as when using a Ready Map. It's bound in the sense that it can only be associated with one hotspot. For example, on a USA map, the marker for Vermont is bound to the Vermont hotspot and cannot be used with any other hotspot. An example of a marker that is not bound is an arrow or a circle. An unbound marker can be used with any number of hotspots.

The reason that you can only import the marker style for a bound marker is because of the very nature of import. Each row in the import spreadsheet applies to a specific hotspot. If MapsAlive allowed you to change the marker style for an unbound marker, then the import for one row could have a side effect on many other hotspots in the tours in your account.

To use the new feature, add a MarkerStyle column to your import spreadsheet and enter marker style names in the cells. Note that the names you type are not case-sensitive, but punctuation must be exactly as it appears in the Tour Builder. An extra space, for example, will prevent MapsAlive from matching a name in the spreadsheet with a marker style name in your account. So just be careful, or copy-paste the names, and you won't have any problems.

To learn about the import feature in general, see the MapsAlive User Guide for Content Management.

MapsAlive and the New 3rd Generation iPad

by George Soules 22. March 2012 15:34

Last Friday we received one of the first new 3rd generation iPads and put it through it's paces. Sweet! Not only does it have cool new features and the awesome Retina display, it's much faster with interactive maps created using MapsAlive. Specifically, panning and zooming maps that have MapZoom turned on is now as quick and responsive as when using a native iOS app. On the older iPads, especially before iOS 5, panning and zooming was sometimes slow and choppy on larger maps. If you were previously using the MapsAlive option to disable smooth panning, you might want to try turning it off and see how your map behaves with iOS 5 (to turn it off, go to the Tour Manager page and in the Mobile Internet Options section, uncheck the Disable Smooth Panning box).

We were hoping to also see a significant improvement in performance for maps that use shape markers with marker styles that use the blend effect. It's a little faster now, but on large maps that have a lot of large shapes (think USA or world) it's still slow. To be fair to Apple, blending is a very compute-intensive operation that involves analysis and modification of every single pixel within a shape. The larger the shape, the more pixels. Perhaps the next OS will show an improvement, perhaps by tapping into the graphics processing hardware.

Back on the bright side, we made a major discovery for people who have the original iPad or iPad 2. If you are still running iOS 4, you definitely want to upgrade to iOS 5 because Apple made the Safari browser much faster. That improvement breathes new life into these older models and makes panning and zooming much nicer. This performance improvement is also evident on iPhone, even my old 3GS. As an aside, Safari on iOS 5 has tabs so that you can easily switch back and forth between different web sites, so that's another bonus.

Here at MapsAlive we are now considering what enhancements we might make to better take advantage of the new iPad. If you have suggestions, we would love to hear them!

Making the MapsAlive directory visible on Android browsers

by Janice Kenyon 19. December 2011 15:35

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.

How to Style Hyperlinks in Hotspot Content

by George Soules 1. November 2011 07:23

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.

Tags: ,

MapsAlive

Using a MapsAlive Gallery to Show 360 Degree Panoramas

by George Soules 24. August 2011 09:09

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.

A MapsAlive gallery used to display 360 degree panoramas

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:

function maOnHotspotChanged(hotspotId)
{
   mapsalive.setMarkerAppearanceNormal("*");
   mapsalive.setMarkerAppearanceSelected(hotspotId);
}

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.

Interactive Restaurant Menus Attract Hungry Diners

by George Soules 22. June 2011 08:00

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:

Interactive Restaurant Menu Sample


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.

Connect with us on Facebook Follow MapsAlive on Twitter MapsAlive on LinkedIn