For the past few weeks, I have been experimenting with Google Earth and Google Maps. The Google Maps API provides powerful functions to display maps, customize their appearance and overlay info, based on a user’s location. There are all kinds of options to customize maps with pins, popup windows, zoom settings, etc. Here are some examples and tutorials on how to use Google Maps with JavaScript. Recently, I went on a business trip from Toronto, Ontario to Kelowna, BC via Vancouver, BC and thought this would be the perfect opportunity to test how to use locations-based info in a Storyline project.

The idea was to create a simple Storyline project that:

• uses a Google Maps API call to retrieve the current longitude and latitude parameters within a defined radius
• passes these values into Storyline variables
• displays location-aware information for three locations (the three airports I passed through on my way back from Kelowna)

Since the Articulate Mobile Player app does not support JavaScript, the only option was to run Storyline HTML5 content in a browser window on my phone. To get rid off the browser’s address bar and give the Storyline content a true app-like appearance, I used PhoneGap Build to create an Android app. See here for some info on the process.

For the location-specific content, I just displayed a webobject of each airport’s website. However, this content could be anything. Imagine a technical tutorial that field support engineers use to automatically display the site-specific network configuration as they travel from one data center to another. Location-awareness could also be used to display French-language content for employees at a company’s Paris office, while learners at the London location see English content. In my experiment I enabled a button that users can tap to display location-aware content. Another option would be to make the location selection completely transparent to the user… the opportunities are endless!

“Here is a recording of the app, as I travelled from my starting location in Kelowna, BC with a stopover in Vancouver, BC to the final destination (Toronto).

For the screen recording, I used Samsung’s SideSync app that allowed me to mirror my phone’s screen to my laptop and then record that.

I still have a lot to learn about Google Maps API calls, but my little experiment confirmed that Javascript and location data can be used to ‘serve’ relevant Storyline content, based on a learner’s location. Here are some basic tutorials that get you started with Google Maps.