This Storyline Easter Egg lets you Embed Interactive Google (and Bing) Maps into Your Course

Not long ago, I watched some Super Heroes in the community find an awesome “Easter egg” in Articulate Storyline. They wanted to embed some content and discovered that it’s possible to insert non-video embed code using the “Video from Website” dialog. Let that sink in for a moment.....non-video content using the "Video from Website" feature.  

Typically, the "Video from Website" feature is used to embed videos (such as YouTube) without showing the entire web page that the video is on.  However, our Super Heroes discovered that you can also embed other content as well. 

Now, you might wonder why you don’t just use the Web Object tool to insert a URL and display a web page in your project.  You can certainly do that (and there are instances where that works great!)  But doing so displays the entire web page, whereas the embed code from certain websites (such as Google Maps and YouTube) will display a specific portion of the page. This comes in really handy when you want to seamlessly integrate an aspect of a website into your course design.  The best part is, using this "Easter egg" is really simple.

Here’s how to use the Video from Website tool to embed a Google (or Bing) Map:

1. Go to your favorite mapping site and find a location you’d like to embed.

2. To find the embed code, click “Share” in Bing Maps or the hyperlink icon in Google Maps. Copy the displayed embed code.

3. In Storyline, select “Video from Website” and then paste the embed code into the dialog box.

4. Your web object placeholder will now show on the screen. You can take this placeholder and move it anywhere on the screen. Storyline will display your map wherever you put the placeholder.

5. Publish your file and post it to your web server or LMS. When you preview or locally view your output, you may not be able to see the map. Simply publish it to your web server to view the project in action.

In the following Screenr, I’ll walk you through the process and also show you a cool tip for getting your map sized just right!

It’s as easy as that! Now that you know you can drop embed code directly into Storyline using this method, can you think of other applications that might be useful? Share your thoughts in the comments below.

And if you want to try this yourself but don't have Storyline, no problem. Just sign up for a fully functional, free trial. And don't forget to post your questions and comments in the forums! We're here to help. For more e-learning tips, examples, and downloads, follow us on Twitter.