Practice: Create geolocation components

The use of geographical assets to determine where someone or something is located, and then selling that specific set of information to anyone who wants to use it is the essence of geolocation. It is the creation of quality, utility, and value for customers, while at the same time creating economic and financial benefits for stakeholders that drive business. Geolocation, particularly in the mobile environment, provides opportunity for both the general populace and businesses of all types.


Grace Walker, IT Consultant, Walker Automated Services

Grace Walker, a partner in Walker Automated Services in Chicago, Illinois, is an IT consultant with a diverse background and broad experience. She has worked in IT as a manager, administrator, programmer, instructor, business analyst, technical analyst, systems analyst, and Web developer in various environments, including telecommunications, education, financial services, and software.

07 October 2011

In this exercise, you create code for the Geolocation API, which is used to determine and share geographical positions. You create code to establish current location as well as code that constantly watches for the user's position.

Frequently used acronyms

  • API: Application programming interface
  • CSS3: Cascading Style Sheet version 3
  • DOM: Document Object Model
  • HTML: Hypertext Markup Language
  • HTML5: HTML version 5
  • W3C: World Wide Web Consortium

To complete the required tasks in this exercise, you should:

  • Understand HTML in general
  • Be familiar with the basics of APIs
  • Know how to create navigator.geolocation objects
  • Understand the fundamentals of JavaScript


Perform the following steps to create the code:

  1. Create code that tests to see whether geolocation is available for the browser being used:
    • If geolocation is available, retrieve the user's current location.
    • If geolocation is not available, display a statement that lets the user know his or her browser is not supported.
  2. Write the statement required to constantly watch for the location rather than just retrieving the current location.
  3. Write the statement that turns the location watch off.
  4. Use the element IDs provided in Listing 1 and the getElementById function to retrieve the geolocation values required for the table to display the listed values.
    Listing 1. Geolocation values
            <td><span id="accuracyValue"></span></td>
            <td><span id="altitudeValue"></span></td>
            <td><span id="altitudeAccuracyValue"></span></td>
            <td><span id="headingValue"></span></td>
            <td><span id="latitudeValue"></span></td>
            <td><span id="longitudeValue"></span></td>
            <td><span id="speedValue"></span></td>

Exercise solution

Follow these solution steps to check your work.



developerWorks: Sign in

Required fields are indicated with an asterisk (*).

Need an IBM ID?
Forgot your IBM ID?

Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.


All information submitted is secure.

Dig deeper into Web development on developerWorks

Zone=Web development
ArticleTitle=Practice: Create geolocation components