Victor's Blog

Live as if you were to die tomorrow. Learn as if you were to live forever

NAVIGATION - SEARCH

Use Geolocation API with Angular.js

Today, I played a little with the Geolocation API. I am really surprised by how accurate it is for a normal laptop if you have the Wifi enabled. So I decided to write something to make it work with Angular.js. Here is what I did:

Prerequisites:
1. Angular.js
2. Google Maps Javascript API 3.x
3. Angular ui-map

Here is my html:

<body ng-app="geo">
    <div class="container main" ng-controller="mainController">
        <form>
            <div class="row">
                <div id="map_canvas" ui-map="model.myMap" class="map" ui-options="mapOptions">
                </div>
                <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]">
                </div>
            </div>
            <div class="row" ng-show="showResult()">
               Latitude: {{lat}} <br />
               Longitude: {{lng}} <br />
               Accuracy: {{accuracy}}
            </div>
            <div class="row" ng-show="!showResult()">
                Error : {{error}}
                Error Code: {{error.code}}
            </div>       
        </form>
    </div>
</body>

Here is my javascript:

var app = angular.module("geo", ["ui.map", "ui.event"])
    .controller("mainController", function ($scope) {
        $scope.lat = "0";
        $scope.lng = "0";
        $scope.accuracy = "0";
        $scope.error = "";
        $scope.model = { myMap: undefined };
        $scope.myMarkers = [];

        $scope.showResult = function () {
            return $scope.error == "";
        }

        $scope.mapOptions = {
            center: new google.maps.LatLng($scope.lat, $scope.lng),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        $scope.showPosition = function (position) {
            $scope.lat = position.coords.latitude;
            $scope.lng = position.coords.longitude;
            $scope.accuracy = position.coords.accuracy;
            $scope.$apply();

            var latlng = new google.maps.LatLng($scope.lat, $scope.lng);
            $scope.model.myMap.setCenter(latlng);
            $scope.myMarkers.push(new google.maps.Marker({ map: $scope.model.myMap, position: latlng }));
        }

        $scope.showError = function (error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    $scope.error = "User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    $scope.error = "Location information is unavailable."
                    break;
                case error.TIMEOUT:
                    $scope.error = "The request to get user location timed out."
                    break;
                case error.UNKNOWN_ERROR:
                    $scope.error = "An unknown error occurred."
                    break;
            }
            $scope.$apply();
        }

        $scope.getLocation = function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition($scope.showPosition, $scope.showError);
            }
            else {
                $scope.error = "Geolocation is not supported by this browser.";
            }
        }

        $scope.getLocation();
    });

Here is a working example.

Note: If you run this on your desktop without Wifi, the Accuracy will probably quite big(the bigger the value, the less the accuracy). This is because if you don't have Wifi, the geolocation api can only use your IP address to determine your location. 

Hope you can have some fun with it.