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

Last Reply 2 days ago By skp

Posted 13 days ago

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

 

Posted 13 days 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 2 days ago

I guess the geolocation doesn't support in http site, but it supports localhost site.

https://jsfiddle.net/deepumohanp/a4g2J/

Only when it comes to https site, it supports.