Cordova Geolocation API and Google API- Getting address, city name, state and country name from latitude/longitude value

Hello Readers,

In this post we will discuss to get the current address, city name, state and country name from latitude/longitude value with the help of Cordova geolocation API and Google API.

To get the address from latitude/longitude values we need to follow some step:

• Create a cordova project.
• Include Google API file into your index.html.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

• Install Cordova Geolocation plugin through CLI

cordova plugin add cordova-plugin-geolocation

Here is the full example:

Index.html

<ion-view>
    <ion-content>
        <input type="text" ng-model="lat" placeholder="Latitude"/>
        <input type="text" ng-model="long" placeholder="Longitude"/>
        <button ng-click="submit(lat,long)">Submit</button>
        <div>Address : {{address}}</div>
        <div>City Name : {{city}}</div>
        <div>State : {{state}}</div>
        <div>Country: {{country}}</div>
    </ion-content>
</ion-view>

In the above code, User can type latitude and longitude in the input fields then click on submit button.

controller.js

$scope.submit = function(lat,long)
    {
        var geocoder = new google.maps.Geocoder();
        var latLng = new google.maps.LatLng(lat,long);
        geocoder.geocode({'latLng': latLng}, function (results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                if (results[0]) 
                {
                    // Formatted address
                    $scope.currentAdd = results[0].formatted_address;
                    $scope.address = $scope.currentAdd;
                    //find country name
                    for (var i=0; i<results[0].address_components.length; i++) 
                    {
                        for (var b=0;b<results[0].address_components[i].types.length;b++) 
                        {

                            /*there are different types that might hold a city 
                             admin_area_lvl_1 usually does in come cases 
                             looking for sublocality type will be more appropriate*/

                            if (results[0].address_components[i].types[b] == "locality") {

                                //this is the object you are looking for

                                city= results[0].address_components[i];
                                $scope.city = city.long_name;
                                break;
                            }
                            if (results[0].address_components[i]
                                   .types[b] == "administrative_area_level_1") {

                                //this is the object you are looking for

                                state= results[0].address_components[i];
                                $scope.state = state.long_name;
                                break;
                            }
                            if (results[0].address_components[i].types[b] == "country") {

                                //this is the object you are looking for

                                country= results[0].address_components[i];
                                $scope.country = country.long_name;
                                break;
                            }
                        }
                    }
                }
                else 
                {
                    alert('No results found');
                    
                }
            } 
            else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) 
            { 
                
            } 
            else 
            {
                alert('Weak Signals. Try again');
            }
        })
    }

In the above code, We will get Current address, city name, state and country name of entered latitude and longitude.

Hope this will help you... :)