Learning Center
Contact Us
Create Interactive Map Solutions with MapsAlive

How to Create an Interactive Floor Plan

Video Transcription

Hey, it's Janice here and I'm going to show you how to create a simple interactive map. I'm going to use a floor plan for this example, but you would use the same steps shown in this video to create just about any kind of interactive map you want.

To get started, choose New > Tour from the Tour Builder menu.

When you are just getting started choose "Show step-by-step instructions" and MapsAlive will guide you through the first steps. I'm going to leave the instructions off in this video so we aren't distracted.

Click Continue to go to the Tour Setup screen where you can give your tour a name — Let's call this tour "House Tour". I'm going to choose "Small" for my tour size to make sure it fits nicely in the video. You can change your tour size at any time and even specify exact dimensions if you like. Here I'll choose a different color scheme. MapsAlive comes with lots of pre-defined color schemes and you can define your own. Let's choose "White" for this tour and continue to Map Setup.

I'm going to create an interactive floor plan so I'll name this map "Floor Plan" and accept the defaults for the other map options for now.

Now I'll upload the floor plan image. I browse for the image on my computer, select it and click Load. You can see a preview of the map here.

A hotspot is a location on an interactive map. You first create a hotspot and add its content and then place the hotspot's marker on the map so you can see it.

To add a hotspot to the floor plan choose New > Hotspot from the menu. I'm going to create one for the kitchen and use the arrow to mark this hotspot on the map. Next, I'm going to upload a photo of the kitchen so I browse for the image and click Load. Here you see a preview of the photo I just uploaded.

You can type descriptive text about the kitchen and add formatting and hyperlinks.

Let's add another hotspot so our interactive floor plan is a little more interesting. I'll add a hotspot for the living room and choose the photo of the living room.

Now I'm going to add the markers to the floor plan by choosing Map > Go To Map from the menu. You see a preview of the map image and underneath are thumbnails for each of the hotspots I just added. Click on a thumbnail and its marker drops down onto the map. You can drag the marker into position and use the map controls to rotate it. Now I'll add the other one, drag it over to the living room and rotate it so it points in the direction the photo was taken.

To see what your tour looks like click Tour Preview at any time. Here is what we've created so far. You see the kitchen photo and text and mousing over the living room marker displays the living room photo.

Let's go back to the Tour Builder and add a second map to this tour. I'm going to add a map that shows different locations in the neighborhood - in this case colleges. I'll call this map "Neighborhood" and this time I'm going to show the photos and text in popups instead of side by side next to the map like I did on the floor plan. This time I'm going to choose a map image of the neighborhood. Now, I'm going to add a hotspot for the University of Vermont and for this map I'm going to use a different marker - how about the pin marker. Just like the floor plan images, I'm going to choose a photo for the University. And, I'll add one more hotspot for Champlain College so there is a little more going on.

Just like I did for the floor plan, I'm going to go to the map to place the markers. You see the neighborhood map and hotspot thumbnails below. When I click the thumbnail its marker drops onto the map where I can drag it into position. Click on the other hotspot thumbnail and place its marker.

Let's see what the tour looks like now. When I mouse over the pin markers the photo displays in a popup instead of next to the map. MapsAlive automatically adds a menu so you can navigate between maps in your tour.

When you are ready to share your tour on the internet, click Publish and MapsAlive will publish it and give it a unique URL. The Code Snippets show you the exact code you can use to link to or embed your tour in a web page.

So, in about 5 minutes we've created a simple two map interactive tour.

MapsAlive Plans & Pricing