This course will become read-only in the near future. Tell us at if that is a problem.

Three ways to add Maps

Back in our chat, there was a lot of interest in using the maps plugin with videos.  If you've been thinking about doing that and want to know how -- this is it!   Here are three options

Example 1: Map plugin showing Google Maps

Like other plugins, you will need to set aside a section in the page's HTML layout to hold the map:

<div id="mapdiv" style="width:400px;height:400px;"></div>

Then add some JavaScript with a list of important values that Popcorn will use to operate the map plugin.



    start: 5,   // show the map

    end: 10,  // end the map

    location: "Boston, MA",  // where to point the map

    zoom: 12, // zoom level of the map

    target: "mapdiv"  // the ID of the map's place in the HTML


There are also options to set the map type (type: "ROADMAP", type:"SATELLITE", or type:"HYBRID"), or to set the latitude and longitude directly instead of using location: "placename".  There's also StreetView, as described by the developer here:

Working link:

Example 2: OpenMap plugin showing OpenStreetMap

OpenMap works the same way as the Google Maps plugin, except with OpenStreetMap, NASA World Wind, and USGS terrain maps - all open data sources.  OpenStreetMap usually loads reasonably well, but the others can be slow.

There is no StreetView available in OpenStreetMap.

Example 3: OpenMap plugin with clickable icons

The OpenMap plugin also supports adding clickable icons to your map.  For example, this example ( ) adds a marker where the Vehicle Assembly Building is at NASA's launch center in Florida using this code:


.openmap( {
  start: 0,
  end: 30,
  target: 'map2',
  lat: 28.621597,
  lng: -80.693722,
  zoom: 9,
  markers: [
      lat: 28.586274,
      lng: -80.650882,
      icon: "",
      text: "Vehicle Assembly Building",
      size: 16
The "markers" parameter opens and closes with square brackets [ ]  which mean a list of items.  Our list only has one item, the marker.  We store several variables in this one marker object by enclosing them with curly brackets { }, just like the list of variables we send to plugins.

Task Discussion