Learning Center
Contact Us
Create Interactive Map Solutions with MapsAlive

Creating Interactive Maps with MapsAlive

To view the table of contents for this video move your mouse over the video. Click a topic to jump to that position in the video. To resume watching without the table of contents, move your mouse off the video.

Video Transcription

Hi, I'm Janice and I want to show you the kinds of interactive maps and floor plans you can create with MapsAlive. At any time you can click a topic to jump to a specific feature.

With MapsAlive you can make any image interactive — floor plans, geographic maps, diagrams, locator maps, museums, campus maps, even photographs.

You can add your own content that displays as you mouse over hotspots on your map. And the best part is there is no programming — Let's see what you can do!

To make a map interactive you add hotspots for places you want to highlight, such as restaurants on a neighborhood map, locations on a floor plan, or cities on a geographic map. You can display photos and text associated with hotspots and add clickable links to go to other web pages. You can even show a video when you mouse over or click a hotspot.

You use the MapsAlive Tour Builder to make an interactive map. It's as easy as choosing and uploading a map image from your computer. Here we'll choose a floor plan image. Next you add a new hotspot for each location on your map. Let's add a hotspot for the kitchen, give it a title and upload a photo taken at that location. You can also type and format text and use the hyperlink manager to add links.

On the Map screen you see a preview of your map and thumbnail images for your hotspots. Just click a thumbnail and its marker drops onto the map. You can drag the markers into position and rotate them if you like. You can click Tour Preview at any time to see your map in action. We call it a tour because it can include more than one map and optional features like a title bar, banner or menu.

With MapsAlive you can display content next to the map or by simply clicking a button you can choose to display your content in popups. Customize the size of your tour and choose from dozens of layouts.

Use the MapZoom feature to display larger and more detailed maps in a smaller area. Use the zoom controls to zoom in and out and drag the map to pan. To turn MapZoom on, all you have to do is check the Enable MapZoom box and MapsAlive automatically adds the zoom controls and makes the map zoomable.

You can change the appearance of your tour with built-in color schemes that define the text, background, title and menu colors. Or you can create your own color scheme to match your web pages.

Let's take a look at what you can do with markers.

Use symbol markers like pins, stars and arrows to pinpoint specific locations on your map. Markers define the appearance of a hotspot and can have different normal and selected appearances. These blue pin markers turn red when you mouse over them to select a hotspot. You can also upload your own symbols and create custom markers related to your map like a You Are Here marker.

Shape markers are useful when you want to highlight a feature or region on your map like a room or neighborhood. This map uses polygon shape markers to highlight visitor center exhibits — images, text and links display below the map when you mouse over the markers. These shape markers show how you can combine multiple distinct areas in the same marker.

Text markers let you use text to label hotspots, annotate your map, and create clickable buttons. This map demonstrates a variety of text markers that use different colors, fonts and borders, even transparent markers. MapsAlive can automatically use hotspot titles for the text or you can type your own text.

To choose a new marker for a hotspot, just select one from the dropdown list on the Edit Hotspot Content screen. And to create a new marker, symbol, or marker style just choose New > Resource from the menu. You can create marker styles and assign them to markers to get just the look you want. Customize the border thickness, choose fill and border colors, change the opacity, and add effects for both the normal and selected appearances.

Create an interactive presentation of photos, drawings, or artwork with the Gallery feature. MapsAlive automatically creates thumbnail-sized photo markers from your hotspot images and arranges them in a grid on a background. When you mouse over a photo marker in the Gallery, the full size image displays.

Using marker styles you can create all kinds of different looks and behaviors including shadow and glow effects, cropping, image opacity, black & white, and captions to name a few.

MapsAlive now comes with lots of common maps like United States maps, US state maps with county outlines, world maps and more. These Ready Maps are free with all plans and include hotspot shapes like the states on this New England Ready Map. You can add your own content, click to drill down to other maps, and add more hotspots like these stars that are actually on top of the state hotspots. You can use marker styles to change the color of the shape markers to customize the appearance of your maps.

The Plus and Pro plans include more hotspots and even more features. You can add a directory that shows the hotspots in your tour and lets you click to select one, display its content and blink its marker like this. When you define your own categories like restaurants, jewelry, or shoes you can group hotspots by category in the directory to make it easier for users to find what they are looking for.

To add a directory to your tour, all you have to do is check Show Directory. You can also customize its location and behavior, and change the size and appearance of the directory.

Powerful content management features let you import hotspot content from a spreadsheet and MapsAlive automatically creates hotspots for you. This is a great way to manage your data — update the spreadsheet and re-import to update your interactive map. You can also import your data from XML.

The Routes feature lets you dynamically draw routes through hotspots when the user mouses over or clicks markers on the map. With the Live Data feature you can retrieve content from your server, like weather conditions or inventory, and display it in real time so your interactive map is always displaying the latest content.

Use the Custom HTML feature to combine your own CSS, JavaScript, and HTML with your interactive map. This legend was added using Custom HTML and calls the MapsAlive JavaScript API to dynamically change the appearance of markers on this Ready Map as the checkboxes are clicked.

When you are ready to make your tour available on the internet for others to use, just click Publish on the Tour Preview screen. Your tour gets it own URL you can use to link to your tour or you can embed your map right within your web page. Click Show Code Snippets to display link or embed code you can copy and paste into your web page. We copied this very same code to embed the tours you see on our web site.

Sign up for a 30-day free trial and see what YOU can do!

MapsAlive Plans & Pricing