Get Location (Latitude and Longitude) using Google Maps API in AngularJS

Last Reply one month ago By skp

Posted one month ago

How to simply get the latitude, longitude and location in angularjs?

 

Results 1 - 5 of 6 12
Posted one month ago

Hi skp,

Using the below articles i have created the example. 

Check this example. Now please take its reference and correct your code.

Get Current Location Latitude and Longitude using JavaScript and HTML5

Google Maps V3: Get address from Latitude and Longitude

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&key=API_KEY"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (p) {
                    var latlng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
                    var geocoder = geocoder = new google.maps.Geocoder();
                    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (results[1]) {
                                alert(
                                "Location: " + results[1].formatted_address +
                                "\nLatitude : " + p.coords.latitude +
                                "\nLongitude : " + p.coords.longitude);
                            }
                        }
                    });
                });
            } else {
                alert('Geo Location feature is not supported in this browser.');
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
</body>
</html>

Screenshot


Posted one month ago

Getting an error :

 Google Maps JavaScript API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

angular.module('myApp').
controller('dashboardController', function ($scope, $http, $sessionStorage, $window, $location, useragent) {
    var apiUrl = "http://stagingserver:85/EBSApi";
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (p) {
            var latlng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
            var geocoder = geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        $window.alert(
                        "Location: " + results[1].formatted_address +
                        "\nLatitude : " + p.coords.latitude +
                        "\nLongitude : " + p.coords.longitude);
                    }
                }
            });
        });
    } else {
        alert('Geo Location feature is not supported in this browser.');
    }
});

 


Posted one month ago

You need to replace the google api key in place of API_KEY.

In order to execute the Google Maps application you will need to register and get an API key from Google API. For more details refer here.

 


Posted one month ago

Do we have any solution without using google maps api.