Embedding a Google Map in your Omeka Exhibit
1561fb59ea172093892f7b6b250cc89a1251123508.jpg

You can embed a google map in your Omeka exhibit by following these instructions.

  • Create a Google map.
  • Press the link icon to get either a URL for the map, or code to embed it in a webpage.
  • You can customize the size of the map by clicking on the link and previewing the map in a window.
  • Cut the code out, from either the basic link or the customized one. It should look something like:
https://maps.google.com/maps/ms?msid=207717320189870953848.0004c6a3d14a43c9ad99e&msa=0

or for customized code:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&amp;msid=207717320189870953848.0004c6a3d14a43c9ad99e&amp;ie=UTF8&amp;t=m&amp;ll=40.784701,-74.286804&amp;spn=0.727869,1.170044&amp;z=9&amp;output=embed">
</iframe><br /><small>View <a href="https://maps.google.com/maps/ms?msa=0&amp;msid=207717320189870953848.0004c6a3d14a43c9ad99e&amp;ie=UTF8&amp;t=m&amp;ll=40.784701,-74.286804&amp;spn=0.727869,1.170044&amp;z=9&amp;source=embed" style="color:#0000FF;text-align:left">New Jersey Historical Museums and Libraries</a> in a larger map</small>

Note: Your code will look slightly different, as it is using the map name and URL from a different map.

  • Open Omeka and edit or add the exhibit page where you want the timeline to appear.
  • Select the HTML editing tab, which opens a blank white box.
  • Paste your code in place.

In the editing window, you should see the embedded timeline.

Tip: Open two tabbed versions of your exhibit when you are editing it. The admin version will be where you edit, the other version where you check your work. Once you save a change in the admin view, then refresh the regular view to see the changes. This will keep you from having to go back and forth between views.

+++If you want to include other text on the page:

For a header, add this code before the code you pasted from Google Maps:

<h1>insert header</h1>

You can use <h2> through <h5> for smaller headings, just follow the same text.

For text following the timeline, add this code after the code you pasted from Google Maps.

<p>Add your text here</p>

Once you have saved these codes, you can save the code and leave the HTML editing screen. You can edit the text in the default editor.

To see an example of a Google map embedded in an exhibit click here.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License