Working with Geolocation watchPosition() API

Last update: •Date posted:
COMMENTS•11 Comments/in /Posted by MIKE DALISAY

I’m going to share a Geolocation watchPosition() API example. This working navigator.geolocation.watchPosition() code I used when I wanted the user to know his current location in real-time (while he is walking or riding a vehicle).

This works while the user is using his Android device or any device with a browser that supports the Geolocation API.

We made this code with the help of Google Maps and jQuery.

Working with Geolocation watchPosition() API

Live Demo

Recommended to use a mobile device, you must allow it to get your current location, don’t worry, I’m not tracking you.

LIVE DEMO

Code Example

Now here’s our index.html code.

<!DOCTYPE HTML>
<html>
<head>
    <title>Geolocation watchPosition() by The Code of a Ninja</title>
     
    <!-- for mobile view -->
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
     
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <script type="text/javascript">
 
        // you can specify the default lat long
        var map,
            currentPositionMarker,
            mapCenter = new google.maps.LatLng(14.668626, 121.24295),
            map;
 
        // change the zoom if you want
        function initializeMap()
        {
            map = new google.maps.Map(document.getElementById('map_canvas'), {
               zoom: 18,
               center: mapCenter,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             });
        }
 
        function locError(error) {
            // tell the user if the current position could not be located
            alert("The current position could not be found!");
        }
 
        // current position of the user
        function setCurrentPosition(pos) {
            currentPositionMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(
                    pos.coords.latitude,
                    pos.coords.longitude
                ),
                title: "Current Position"
            });
            map.panTo(new google.maps.LatLng(
                    pos.coords.latitude,
                    pos.coords.longitude
                ));
        }
 
        function displayAndWatch(position) {
         
            // set current position
            setCurrentPosition(position);
             
            // watch position
            watchCurrentPosition();
        }
 
        function watchCurrentPosition() {
            var positionTimer = navigator.geolocation.watchPosition(
                function (position) {
                    setMarkerPosition(
                        currentPositionMarker,
                        position
                    );
                });
        }
 
        function setMarkerPosition(marker, position) {
            marker.setPosition(
                new google.maps.LatLng(
                    position.coords.latitude,
                    position.coords.longitude)
            );
        }
 
        function initLocationProcedure() {
            initializeMap();
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
            } else {
                // tell the user if a browser doesn't support this amazing API
                alert("Your browser does not support the Geolocation API!");
            }
        }
 
        // initialize with a little help of jQuery
        $(document).ready(function() {
            initLocationProcedure();
        });
    </script>
</head>
 
<body style="margin:0; padding:0;">
     
    <!-- display the map here, you can changed the height or style -->
    <div id="map_canvas" style="height:25em; margin:0; padding:0;"></div>
</body>
 
</html>

In my case, I used this code with an Android WebView since it should be seen inside an app I’m working on, but as I said, this will work with any device with a browser.

If you have the same case as mine, you can also use this piece of android WebView code.

Just add:

webSettings.setGeolocationEnabled(true);

and inside your setWebChromeClient()…

@Override
public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
     
    super.onGeolocationPermissionsShowPrompt(origin, callback);
    callback.invoke(origin, true, false);
}

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

[purchase_link id="12468" text="Download Now" style="button" color="green"]

Issues Encountered

If you were testing it with an Adroid Webview or Chrome Browser and seemed like it is not working, don’t lose hope. There is always hope. :)

Here’s the solution, uninstall the Chrome browser and then re-install it.

Related Source Code

Google Maps Geocoding Example with PHP - This tutorial is about a Google Maps geocoding example with PHP. We used some Google Maps JavaScript to show the geo-coded data on the map as well.

Further Reading

Geolocation API Specification
Geolocation.watchPosition() from Mozilla Developer Network

Don’t hesitate to post your comments regarding this Geolocation watchPosition() API example code.

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.