title: Get current location on Google Map - AngularJS
body: <p>I'm trying to get the current location using Google Map with AngularJS.
  This is my code:-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('indexAngularApp', ['uiGmapgoogle-maps'])
    .controller('mapsController', function($scope, $http) {
      //this is default coordinates for the map when it loads for first time  
  
      var options = {
        enableHighAccuracy: true
      };
  
      navigator.geolocation.getCurrentPosition(function(pos) {
          $scope.map = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
          $scope.map.center.latitude = new google.maps.LatLng(pos.coords.latitude);
          $scope.map.center.longitude = new google.maps.LatLng(pos.coords.longitude);
          $scope.map.center.zoom = 15;
  
          //$scope.position.latitude = 28.699955;
          //$scope.position.longitude = 77.098159;
  
          //var a = $scope.position.latitude;
          //var b = $scope.position.longitude;
  
          //console.log(JSON.stringify($scope.map));
  
          //$scope.map.center.latitude = $scope.position.latitude;
          //$scope.map.center.longitude = data.data.Long;
  
          //   $scope.map =
          //{
          //    center:
          //    {
          //        latitude: a,
          //        longitude: b
          //    },
  
          //    zoom: 15
          //}
  
        },
        function(error) {
          alert('Unable to get location: ' + error.message);
        }, options);
  
  
      $scope.markers = [];
      $scope.locations = [];
      //to get all the locations from the server  
      $http.get('http://localhost:4582/Api/NewCompWebAPI').then(function(data) {
        $scope.locations = data.data;
      }, function() {
        alert('Error');
      });
      //service that gets makers info from server  
      $scope.ShowLocation = function(locationID) {
        $http.get('/home/GetMarkerData', {
          params: {
            locationID: locationID
          }
        }).then(function(data) {
          $scope.markers = [];
          $scope.markers.push({
            id: data.data.LocationID,
            coords: {
              latitude: data.data.Lat,
              longitude: data.data.Long
            },
            title: data.data.title, //title of the makers  
            address: data.data.Address, //Address of the makers  
            image: data.data.ImagePath //image --optional  
          });
          //set map focus to center  
          $scope.map.center.latitude = data.data.Lat;
          $scope.map.center.longitude = data.data.Long;
        }, function() {
          alert('Error'); //shows error if connection lost or error occurs  
        });
      }
      //Show or Hide marker on map using options passes here  
      $scope.windowOptions = {
        show: true
      };
  
  
  
    })
  
  //mapsController Ends Here</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;input {
    padding: 5px;
    border: 1px solid #A5A5A5;
  }
  
  input.ng-dirty.ng-invalid {
    border: 1px solid red;
    background-color: rgb(255, 244, 244);
  }
  
  .error {
    color: red;
  }
  
  .angular-google-map-container {
    height: 300px;
    box-shadow: 2px 2px 3px 3px lightgrey;
  }
  
  .angular-google-map {
    width: 80%;
    height: 100%;
    margin: auto 0px;
  }
  
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"&gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;key=AIzaSyD7d5zEqURlPCFVM_NcsHLGSms_Pnu4-M4"&gt;&lt;/script&gt;
  &lt;script src="//rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"&gt;&lt;/script&gt;
  &lt;div ng-app="indexAngularApp"&gt;
  
    &lt;!--Div for mapsController Upload Started--&gt;
    &lt;div class="col-md-12"&gt;
      &lt;div ng-controller="mapsController"&gt;
        &lt;!--It displays the markers links--&gt;
        &lt;div class="position"&gt;{{map.center}}&lt;/div&gt;
  
        &lt;div class="maps"&gt;
          &lt;!-- Add directive code (gmap directive) for show map and markers--&gt;
          &lt;ui-gmap-google-map style="box-shadow:2px 2px 2px 2px lightgrey; width:100%" center="map.center" zoom="map.zoom"&gt;
            &lt;ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id"&gt;
              &lt;ui-gmap-window options="windowOptions" show="windowOptions.show"&gt;
                &lt;div style="max-width:200px"&gt;
                  &lt;div class="header"&gt;&lt;strong&gt;{{marker.title}}&lt;/strong&gt;&lt;/div&gt;
                  &lt;div id="mapcontent" class="container"&gt;
                    &lt;p&gt;
                      &lt;img ng-src="{{marker.image}}" class="img-responsive" style="width:100%; height:200px" /&gt;
                      &lt;div&gt;{{marker.address}}&lt;/div&gt;
                      &lt;b&gt;No of Customers:&lt;/b&gt;
                    &lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/ui-gmap-window&gt;
            &lt;/ui-gmap-marker&gt;
          &lt;/ui-gmap-google-map&gt;
        &lt;/div&gt;
        &lt;hr /&gt;
        &lt;div class="locations"&gt;
          &lt;ul&gt;
            &lt;li class="text-success" ng-repeat="l in locations" ng-click="ShowLocation(l.UniqueName)"&gt;&lt;a href="#"&gt;{{l.UniqueName}}&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--Div for mapsController Upload Ended--&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now the problem is I'm not able to get the current latitude and longitude of the device. Can anyone help me with this?</p>