City of Boston wins the Society of Professional Journalists’ National Historic Site in Journalism award

by Janice Kenyon 19. October 2015 14:56

The Mayor of Boston, Marty Walsh, was presented with the Society of Professional Journalists’ National Historic Site in Journalism award on September 25, 2015. The award honors the City of Boston’s contributions to the field of journalism.

Emerson College Journalism Professor Manny Paraschos nominated the City of Boston for the award to recognize Boston's history in Journalism. Professor Paraschos is the author of The Boston Journalism Trail which displays historical places and events on an interactive map created with MapsAlive.

"I was able to locate with considerable accuracy the places where the first publications were located by consulting colonial maps, newspapers, city records and books on historic buildings, schools and taverns. The sites are all around us, and although most of the original buildings are gone, the streets, the corners and intersections are still there, witnesses to the job these early journalists were doing." writes Paraschos.

Congratulations to the city of Boston on the award and to Professor Paraschos for preserving this important knowledge and background, particularly as the journalism profession is changing so rapidy.

A New Year of Interactive Maps

by Janice Kenyon 9. January 2015 10:48

Happy 2015 from MapsAlive! You've created an amazing variety of interactive maps since we launched MapsAlive almost 8 years ago, and we're looking forward to seeing more new and exciting ideas this year.

Here are some of the ways you used MapsAlive last year:

  • Interactive floor plans - residential and commercial
  • Training and product diagrams for web sites
  • Trade show, conference, and exhibit floor plans and maps
  • Employee directories and locator maps
  • Shopping malls
  • Interactive campus maps
  • Library and school maps
  • Campground maps
  • Interactive recreation maps for hiking, fishing, boating and more
  • Online product catalogs
  • Tourist and travel maps
  • Farmer's markets
  • Museum maps

As always, let us know if we can answer questions or help with your project. Keep in touch and keep on mapping!

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 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:

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: 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:

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:

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:

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 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 you will not be able to include your interactive maps. This is because 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"); = "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;

#maTextArea a:link {

#maTextArea a:visited {

#maTextArea a:hover {

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: ,


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