Incorporating Grab A Grid Reference into a website

  1. Save the source code - the HTML page.
    You choose to use our code at your own risk, without any guarantee of anything, or any support. (It's free after all!)

  2. Obtain your own key for Google Maps by signing up here: http://code.google.com/apis/maps/signup.html
    Replace our key with yours. The key is the red bit in this line:

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWtY9tNaUEo4UuagVMKnv6WVBlBzUwwMQ&amp;v=3&amp;region=GB"> </script>

    WARNING: The blue bit in the code above is the version of Google Maps to use. At some point this version of Google Maps will be deprecated and superceded. All Grab-a-Grid-Refs may suddenly stop working when this happens. - don't blame us. Google Maps has lots of very good online documentation, and a forum for resolving problems, and is the place to turn to for help with anything to do with Google Maps.

  3. If you are using the Duo version then you will need to obtain your own key for Ordnance Survey OS Maps API by applying for a Premium Plan: https://osdatahub.os.uk/docs/oauth2/gettingStarted
    select OS Maps API and add to new project;
    under OS Maps API Raster tiles on the next screen - select Layer for ZXY Endpoint Outdoor 3857;
    setup project <project name> with your details - DO NOT provide credit card details if you wish to be limited to the free usage allocation;
    Contact the Ordnance Survey should you wish to limit the keys to your own website.

    Replace our key with yours. The key is the red bit in this line:

    var apiKey = 'CQV0pnbLDQMiZbTQ5Qo8Pf5nSGFStLpN'; // OS Project API key

    (You will probably need to upload the webpage to your website for the maps to work. You can't always test them on your own PC).

  4. Centre the start point where you want by changing the latitude and longitude, and the initial zoom amount:

    function initialize() {
    var a = 52.030714; // Start latitude
    var b = -0.472808; // Start longitude
    var myOptions = {zoom: 12,


  5. If you don't want county boundary buttons, just remove the code between

    <!-- Start of Boundary controls -->

    <!-- End of Boundary controls -->


  6. You should include a link to the GNU General Public License Version 2.

  7. Add a link somewhere to refers back to this website, so that you can find the latest version as we continue to develop the tool.
That should be it, everything else is cosmetic. But you will obviously need to change formatting to your own house style.