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 1^st 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!

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.

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.

The Welcome Maps are fun, colorful and informative maps that guide visitors to Cambria/San Simeon, Pismo Beach, Morro Bay, and Paso Robles in the California Central Coast area. Now, travelers can view interactive maps online to find hotels, activities, restaurants, shopping and other businesses. Thousands of visitors use these interactive maps before they travel as well as during their stay.

Mike Schimberg, President of Welcome Media, wanted to provide more value for the business advertisers on his printed maps. With MapsAlive he created interactive maps for each community showing the location and ad for each advertiser. Viewers can browse by mousing over locations on the map or find businesses in the categorized directory. Each ad includes a link to the advertiser's web site and some include a video that plays right on the map.

Area Chambers of Commerce and over ninety hotels distribute the printed maps to visitors requesting information. Now these groups and other businesses can send a link to the interactive map via email or add a link to their own web site.

Mike recently sent these kind comments:

"MapsAlive has been a boon to our business. We needed a simple and user friendly way to show our maps on the internet. MapsAlive makes it easy to make changes on the fly from the home office or on the road. Janice and George have always gone the extra mile in technical support. The recent updates in MapsAlive 3 have sparked many creative ideas and possibilities."

Thank you, Mike − it is a pleasure to see such effective and useful interactive maps. We are working hard on the HTML5 version of MapsAlive so these and other maps can soon be viewed on the iPad, iPhone and iPod.

Try the interactive Welcome Maps here: http://welcomemap.biz/central_coast_maps.html.

Here's a fun and interesting way to visualize a house or apartment before it is even built! 3DPlanView transforms traditional blueprints or floor plans into beautiful 3D floor plan models. Creating an interactive floor plan with 3D renderings can save money and avoid costly mistakes because you can see your entire home, inside and out before you build.

Kay Nordby, lead designer and owner of 3DPlanView, creates the renderings and also uses MapsAlive to show what a home will look like from various camera locations. The interactive floor plan lets you view the images as you move your mouse over the markers in each room.

3DPlanView can take any floor plan and create 3D images using your own selections for flooring, wall coverings, windows, doors, appliances or fixtures. Or you can select from six design styles like Craftsmen Bungalow or Modern Traditional. This way you can not only see the layout of your future home, but personalize it with your own style.

Combining 3D floor plans and images with the interactivity added with MapsAlive is a brilliant solution to helping people get comfortable with one of the most important and expensive decisions they will ever make.

Kay sent this note about her experience using MapsAlive:

“Thanks for making an effective and simple tool that helps our clients tour their homes before they build!”

Thank you, Kay — we look forward to seeing more projects.

You can see this interactive 3D floor plan of a two bedroom apartment here: http://www.3dplanview.com/ApartmentInteractive.htm.

What comes to mind when you picture an interactive map? Perhaps you envision a clickable map of the United States, a map showing the location of all your favorite donut shops, or maybe a Google map.

But, there are dozens of ways to use interactive maps to spice up your web site and provide useful information to your visitors. Interactive maps can display photos, text or video related to locations on the map and you can click to link to other maps or web pages to see more detailed information. Since you can use any image as a map and display pretty much anything you want when you mouse over hotspots, the sky is the limit.

Here are some common and not so common ideas for interactive maps:

Real Estate Maps

• Interactive floor plans are the next best thing to being there.
• Location maps can show where one or more homes are located.
• Subdivision maps can show available lots, price, size and other features for each lot.
• Aerial photographs of a neighborhood help locate schools, shopping or other attractions.
• Vacation rental properties – give viewers a sense of the area.

Travel & Tourism Maps

• Stylized city maps can show lodging, restaurants and attractions.
• Show cruise ship routes with photos and descriptions of ports of call.
• Create an interactive tour of the cruise ship itself to help people see the layout and amenities.
• Hiking trails can show routes and terrain.
• Bicycle tour maps – show routes, points of interest, distances and overnight stops.
• Interactive maps of theme parks can highlight rides, shows or activities.
• Campground maps can help people choose sites and see what the park is like.
• Resort maps – entice people to book a stay with you.

Interactive Facilities, Museum and Campus Maps

• Mall maps help people locate stores and services, and help them decide where to park.
• An interactive hospital floorplan can make it easier to navigate multiple buildings, corridors and elevators.
• Interactive museum maps can show galleries, special exhibits, shops and restaurants.
• Health club maps can show equipment rooms, pools, dance studios and more.
• Exhibitions, trade shows, or conventions can use interactive maps to sell booths to vendors and show visitors where to find the companies or exhibitors they are interested in.
• Golf course maps can show photographs of each hole and include the yardage and statistics.
• Campus maps help people learn about a school and find the building they are looking for.

Interactive Diagrams and Charts

• Interactive parts diagrams can help people identify replacement parts.
• Educational diagrams are ideal for students or for explaining complex products and services.
• Interactive org charts can show your company structure.
• Turn sketches, exploded views and 3D renderings into interactive tools.

Some unusual examples

• Promote your music with an interactive CD cover – play audio clips when you move over tracks.
• Create an interactive restaurant menu with beautiful food pictures to tempt people to come to your restaurant.
• Create an interactive gallery to show off your photographs or artwork.
• Make an interactive timeline of historical events, progress on a construction project or your travels across Europe.

These are just a few ideas – what kind of interactive map would you create?

After writing about Using Interactive Locator Maps last week, I wanted to share how Kick For Nick added an informative interactive locator map to their web site that shows all the towns across the country that have contributed soccer balls.

Kick For Nick is a non-profit organization created in honor of PFC Nicholas Madaras. Nick was an avid soccer player, fan and coach who joined the Army after graduating from Wilton High School in Wilton, CT. When Nick came home on leave from Iraq he told his parents he would like to bring back soccer balls for the children in Iraq to reach out to them and bring a bit of happiness and playfulness to their difficult lives. He collected some balls and his parents were going to send them to him, but in early September 2006 Nick was killed by an IED before he could distribute them. Since then Kick For Nick has distributed nearly 33,000 soccer balls.

The folks at Kick For Nick used a map of the United States and made it interactive using MapsAlive. They used soccer balls to show the states that have contributed to the program. A list of towns that have donated soccer balls is displayed when you move your mouse over a ball on a state. The map adds interest to the Kick For Nick web site and is a very effective way for people to visualize the success of this program. I’ll bet it inspires people to donate and get their town on the map!

You can create a map like this for your web site. The MapsAlive Ready Maps collection includes free US maps, state maps with county outlines, world maps and more. You can use your own symbols as markers to personalize your map, display photos, text or video, and make your map clickable.

To learn more about Kick For Nick visit http://www.kickfornick.org.

Locator maps are used to show all the places your business operates such as stores, sales offices, warehouses and shipping facilities. Adding an interactive locator map to your web site can help visitors find and learn about different locations. They can click or mouse over hotspots to see a photo, watch a video, read descriptions or get contact information. Interactive locator maps are fun to use and make your web site look more professional.

Keep your interactive map simple

The most effective locator maps are simple and easy to understand. The map image you choose should show only enough detail to make locations easily recognizable. Often people just want to know whether you have an office in their state or a store near their city. A simple map makes it easy to tell at a glance and then they can click on that location to get more information.

Make your map clickable

A clickable map lets visitors link to other maps or web pages. For example, a top level locator map like a country map could show all the states where your business has offices and let visitors click to go to individual state maps showing where each office is located. Try this larger version of the coffee shop interactive locator map to see how this works.

Embedding your map into your web page

You can add an interactive map to any web page. It's as easy as copying and pasting some simple HTML embed code where you want to display the map. If you don't have a lot of room or your business locations are spread out on your map you can make your map zoomable. This lets you display a larger map in a smaller area.

Why Not Just Use a Google Map?

A Google Map may not be the best way to provide a locator map. First, they contain too much detail that detracts from your business and second, they make your site look commonplace. Instead, choose a map that can easily highlight the locations you want to show – you could use a world map, a United States map, a regional or city map or even the inside of a building like a shopping mall. Use an attractive map image that enhances your web site and interesting hotspot graphics that make your locations really stand out. If you need to provide driving directions, you can add a link to a Google Map in the text that displays when someone clicks a location.

Interactive locator maps are a valuable addition to any web site, conveying useful information and enhancing the visitors experience on your site.

The South Carolina Baptist Convention (SCBC) recently invested $2 million in facility upgrades of its beautiful White Oak Conference Center. Focusing on staff development, and implementing guest service initiatives, White Oak Conference Center, located near Winnsboro, has significantly increased its usage.

Another SCBC property is CampMcCall. Located on 318 acres in the beautiful Blue Ridge Mountains, Camp McCall is used for retreats and summer camps for groups numbering 25 to 250 people.

Judy Ramsey, Website Strategist, for SCBC, used MapsAlive to create interactive maps for both facilities to show off their many amenities. The maps provide web site visitors with an interactive experience that is the next best thing to actually being there.

Judy did a really nice job on these maps. One very cool thing she did was to integrate a slide show into the popups that appear when you mouse over hotspots on the map.  See for yourself by clicking these links: White Oak Conference Center and CampMcCall.

One of California's most prestigious retirement communities, La Costa Glen, wanted to give seniors a sense of what it would be like to live there. The 55 acre park-like setting of 77 villas, 29 garden villas, and 539 apartment homes, has a 5-star health facility, and is only two and a half miles from the Pacific ocean.

Start with a good idea
Don Kiel and the La Costa Glen marketing department wanted to create an interactive map to promote La Costa Glen. Don had a lovely stylized site map and beautiful color photos, and wanted a way to put these together and make the map interactive. His vision was to allow visitors on the web site to explore the neighborhood and tour the club houses using interactive maps and floor plans. He also wanted to show an interactive gallery with photos of the shops and cafes of the Forum at Carlsbad across the street.

Make it happen
Don was able to realize his vision using MapsAlive. Along the way he had a few questions and needed a little advice on the best way to implement his solution. He contacted MapsAlive tech support and I provided assistance. I was delighted when I got this email from him:

"You have provided by far the best support that I have ever had with any other hardware or software I have used."

Thanks Don! That's really nice to hear.

Enjoy the result
Prospective residents can now tour La Costa Glen online before visiting in person. Apparently they like it because Don wrote again to say “We have gotten so many compliments on [the map] and we are determined to add more photos and make it even better. Thanks again for your support in this project.”

You can see the La Costa Glen interactive map here: http://lacostaglen.com/VirtualTour/VirtualTourMain.asp.

To learn more about MapsAlive visit www.mapsalive.com.