Embedding Maps

Spatial narratives offer us a great way to see the story we’re trying to tell by allowing your followers to see the relations among places and events.

While UO blogs doesn’t have a mapping widget (yet!), you can embed a map in a page on your site.  There are lots of options.  The easiest is the following:

  1. create a page.
  2. Place the curser where you want the map to appear on the page (at the top, or perhaps you have a paragraph introducing the map and you want the map to appear after the paragraph).
  3. using the “embed feature” you can import an existing map.  For example, I googled “Frankenstein maps” and found the first example below.  Using the embed feature I imported the map into my page.
  4. Click on the “Add Media” box just above the text box on the page (from the Dashboard side).
  5. Go to the Map you want to embed and type on “share.”
  6. Next, click on the embed link and copy the iframe code.  You’ll notice that the iframe code looks nothing like a web address.  You’re not embedding the website; you’re embedding the embed code.
  7. Return to your WordPress site “Add media” box, which you left open.  You’ll see an option “insert embed code.”  Click on that option and a box will pop up.  Paste the code you took from the website in that box.  Be sure to hit the orange “insert into post” box at the bottom of that box.
  8. When you return to your page you should see your dynamic map.

 

What happens, though, if you want to map something that doesn’t have a preexisting map?  Simple: you build one.

Here’s a guide to building a map in google maps (like the one above):

https://www.youtube.com/watch?v=IX6iQ32lsHg

 

But what happens if you don’t want a google map.  What if you want something that looks different from the ones above?  The good news: plenty of options!  Try a Storymap JS.  You can build a Storymap JS by following the instructions on their site: https://storymap.knightlab.com/

Just click on the green button: “Make a StoryMap” and they’ll walk you through the process.  They have a great set of “frequently asked questions” on their site.  I’m pasting one I just built on Mary Shelley below. After building the map I clicked on the “Share” button on the Storymap JS site.  The program created another i-frame embed code (just like the one above) which I embedded in this page using the “add media” button.  In sum, the process for embedding a google map and a StoryMap JS map are the same.