Quickstart: detecting location using HTML5 (Windows Store apps using JavaScript and HTML) (Windows)

Language: JavaScript and HTML | VB/C#/C++ and XAML

4 out of 4 rated this helpful - Rate this topic

[This topic is featured in Develop great apps for Windows 8.]

This quickstart shows you how to detect a user's geographical location, by using the W3C Geolocation API available in HTML5.

Objective: To learn how to detect a user's geographical location using HTML5.

Prerequisites

You should be familiar with HTML and JavaScript.

Time to complete: 20 minutes.

Instructions

1. Verify that location is enabled

Open Control Panel, choose Privacy, and set Allow apps to use my location to On.

2. Open Microsoft Visual Studio 2012

Open an instance of Microsoft Visual Studio 2012.

3. Create a New Project

In the New Project dialog box, create a blank Windows Store app.

4. Declare the Location Capability

Double click on package.appxmanifest in solution explorer. Select the Capabilities tab. Check Location in the Capabilities list.

5. Insert the Application JavaScript and HTML

Open your file Default.html and copy the following HTML into this file (replacing its original contents).

JavaScript


<!DOCTYPE html>  
<html>
<head>
<title>Geolocation API Example</title>

<script type="text/javascript">

    var nav = null; 

    function requestPosition() {
        if (nav == null) {
            nav = window.navigator;
        }

        var geoloc = nav.geolocation;
        if (geoloc != null) {
            geoloc.getCurrentPosition(successCallback, errorCallback);
        }

    }

    function successCallback(position) {
        document.getElementById("latitude").innerHTML = 
            position.coords.latitude;
        document.getElementById("longitude").innerHTML = 
            position.coords.longitude;
      
    }

    function errorCallback(error) {
        var strMessage = "";

        // Check for known errors
        switch (error.code) {
            case error.PERMISSION_DENIED:
                strMessage = "Access to your location is turned off. "  +
                    "Change your settings to turn it back on.";
                break;
            case error.POSITION_UNAVAILABLE:
                strMessage = "Data from location services is " + 
                    "currently unavailable.";
                break;
            case error.TIMEOUT:
                strMessage = "Location could not be determined " +
                    "within a specified timeout period.";
                break;
            default:
                break;
        }

        document.getElementById("status").innerHTML = strMessage;
    }

</script>
</head>
    <body>
        <label for="latitude">Latitude: </label> <div id="latitude"></div><br />
        <label for="longitude">Longitude: </label> <div id="longitude"> </div><br />
        <div id="status"> </div><br />
        <input type="button" onclick="requestPosition()" value="Get Latitude and Longitude"  /> 
    </body>

</html>

6. Test the App

On the Debug menu, click Start Debugging to test the solution.
The first time you run the sample, you'll get a prompt that asks if the app can use your location. Choose the Allow option.
Click the Get Location button to get the current location.

Note If location data doesn't display, check the following:

Make sure you've enabled access to location by opening package.appxmanifest in Solution Explorer and checking Location in the Capabilities tab.
If an administrator has disabled location services, your app won't be able to access the user's location. In Control Panel, open Change Location Settings and ensure that Turn on the Windows Location platform is checked.

Summary

In this quickstart, you created a simple application that detected a user's location using HTML5. See the Building a Location-Aware Webpage topic for more information.