Directions Finder

Overview

This Directions Finder component provides accurate directions to locations across Hampshire. 

It allows for the selection of transport method (car, public transport, cycling or walking) and provides suitable routes via Google Maps.

Example

Directions to Hampshire County council

Car

Public Transport

Cycle

Walk

WCMS use
  • From the Experience Editor, in a placeholder press the 'add here' insert option
  • Browse Renderings > Building Blocks > Forms > DirectionsFinder
  • Choose an existing Address item, or create new address under Common Content > Text  > Addresses

If creating a new Address item, ensure that you have obtained the correct Longitude and Latitude co-ordinates.

MVC.net use
Code

   <h2>Directions to Hampshire County council</h2>
    <form action="https://www.google.co.uk/maps/" class="hero-form has-legend"
    method="get">
        <div class="row">
            <label class="add-bottom"><span class="number-blocks">1</span> How
            will you be travelling?</label>
            <div class="columns three left center">
                <label><input class="directions-radio" name="dirflg" type=
                "radio" value="h"> <i class=
                "large icon ts-icon trading-standards-icon car"></i></label>
                <p>Car</p>
            </div>
            <div class="columns three left center">
                <label><input class="directions-radio" name="dirflg" type=
                "radio" value="r"> <i class=
                "large icon ts-icon trading-standards-icon truck"></i></label>
                <p>Public Transport</p>
            </div>
            <div class="columns three left center">
                <label><input class="directions-radio" name="dirflg" type=
                "radio" value="b"> <i class=
                "large icon ts-icon trading-standards-icon bike"></i></label>
                <p>Cycle</p>
            </div>
            <div class="columns three left center">
                <label><input class="directions-radio" name="dirflg" type=
                "radio" value="w"> <i class=
                "large trading-standards-icon direction icon"></i></label>
                <p>Walk</p>
            </div>
        </div><label class="add-bottom" for="saddr"><span class=
        "number-blocks">2</span> Enter your location</label>
        <ul class="row input-append remove-sides">
            <li class="eight columns alpha omega"><input id="saddr" name=
            "saddr" placeholder="postcode, town or city, address" type="text"
            value=""></li>
            <li class="four columns alpha omega"><button class=
            "full-width green" id="search" name="search" type="submit">Get
            directions</button> <input name="daddr" type="hidden" value=
            "LONGITUDE_VALUE,LATITUDE_VALUE"> <input name="hl" type="hidden" value=
            "en"></li>
        </ul>
    </form>
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release