Obtaining an API key

An API browser key is required to access the Google Maps package used to display the location of venues. These can be obtained free of charge, and permit a limited number of visits (currently 25000) per day.

Request a key

[This requires a google/gmail account] To obtain a key, visit the Google API developers page. Click "Create a new project" if you dont have one already.

  1. Select 'Credentials' from the left hand menu,
  2. On the Credentials page, select 'Create credentials'
  3. Select 'API key' from the dropdown menu. .
  4. Select 'Browser Key' from the popup window
  5. Enter a name to refer to this key
  6. You may enter the name of a website which will use this key (referrer) , or add this later
  7. Click Create, to create the new key -
  8. The alphanumeric string which represents the key is displayed. The icon to the right of the key will copy it to the clipboard.
  9. Click OK to return to the credentials page - it should look like this -

The key string is needed for the Google Maps API initialisation, called from the main webpage.

Restricting key use

The key string can be seen by inspecting the source of your webpage. To prevent it being used for other purposes, its use can be restricted to known sites. Click on the key name in the API table, and enter a site in the referrer field -

However, it may be best to make this restriction after establishing that the web page and key are working, as this restriction introduces a further complication to the process.

How to use the key

Look for these lines (just after the <body> tag ) in Example.html -

<!--   ***   This file initilises and authorizes your use of the Google Maps package;
substitute '<apikey>' with a valid google maps browser API key (see documentation) *** -->
<script src="https://maps.googleapis.com/maps/api/js?key=<apikey>&callback=InitPage"
async defer ></script>

Substitute your key string for the <apikey> string in the script src definition


If the map area shows a message 'Oops - map not available' or similar, then there is probably a problem with the API key. A more helpful message can be found in the consol log (press F12 to display this for the Chrome browser) Possible causes are -