Heritage Open Day -
Google Maps Webpage

The Heritage Open Day webpage uses javascript to create an interactive Google map showing open day venues, a table of venues (with opening times), and a description of each venue when selected.

This screenshot shows the Chesham HOD sites for 2016. A similar page can be created for any location by editing a short file to define the area to be included in the map, and the venues to be listed. This zip file contains all files necessary to run a simple example, which provides a skeleton structure for any new site. The only other requirement is a key to access the Google Maps API - see this page for details.

Setting up a Page

To set up a webpage on your site -

  1. Download the zip file
  2. Unpack the contents into an empty directory in your website; this should contain these files & directories -
  3. Obtain a Google Maps API key (how ?)
  4. Insert the key in the Example.html file (how?)

At this point, if you upload the new directory to your site, you should see the example page (Bank of England, Tower of London ). If the Google Map does not load, then an API key problem is the most likely cause - see this page for suggestions.

Customise your page

To replace the example sites with your sites -

  1. Update the map coordinates and venue definitions in Venue.js (more..)
  2. Add your venue descriptions to the Descriptions subdirectory. The Welcome.html file is displayed when the page loads, and can be altered to describe your open day. Sorry.html is displayed if no description file is found for a venue.
    NB The description files are copied into the main webpage when displayed, and so any links should be relative to that page, not the Descriptions directory in which the files are stored ( ie use ./Images/Logo.jpg, not ../Images/Logo.jpg )
  3. Add thumbnails for each site into the Images subdirectory. These are displayed on the map when a venue is selected. Image files are named <TagName>_th.jpg, where <TagName> is an abbreviation for each venue, defined in the Venue.js file.
  4. Customise any headings, colours etc in Example.html, HOD2.css. Please retaqin the license information. The file name Example can be changed, without requiring any other changes to the package.

Help !

Use this Email to request help and support, or suggest improvements - Good Luck !