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

Last Reply 5 months ago By skp

Posted 5 months ago

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

 

Results 1 - 5 of 6 12
Posted 5 months 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 5 months 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 5 months 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 5 months ago

Do we have any solution without using google maps api.