Cordova App with Google Places Api Service

1. In this we learn how to consume google place api service and create nearby place app using cordova. In this app we will fetch nearest Bank ATM List.
2. In this app i will tell you what you will required which are as follows:- 
1.  You required Google Place api key which you will get from below link-      https://developers.google.com/places/web-service/intro (Detailed Google Places api documentation) .
2. Once you will get key just save or copy paste somewhere in txt file
3. Now create project in cordova 
4. Once cordova project is created goto project folder and install GeoLocation plugin in cordova project. with this plugin we will get current latitude and longitude Link for downloading plugin - cordova plugin add cordova-plugin-geolocation     
5. Include jquery-1.11.1.min.js path in index.html
6. Comment <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> line in index,html
7. Open project in android studio.
8. All above step completed then we will start for coding.
3. So now open Index.js file in onDeviceReady we will write code for getting current position i.e longitude & latitude code is below

           var onSuccess = function(position) {

        window.localStorage.setItem('long',position.coords.longitude);

        window.localStorage.setItem('lat',position.coords.latitude);

       };

        function onError(error) {

            alert('code: '    + error.code    + '\n' +

            'message: ' + error.message + '\n');

      }

      navigator.geolocation.getCurrentPosition(onSuccess, onError);



     From above code we will get longitude and latitude and we will be store that thing in our 
     Localstore its one of the great feature of HTML5 where we can store value in key->value pair
     and used it anywhere in our code. for more information on localstore used this link  below link
     https://www.w3schools.com/html/html5_webstorage.asp



   4. Now write code for getting nearest bank ATM list in JQuery AJAX.



   $(document).ready(function(){
    var lat=window.localStorage.getItem('lat');
    var long=window.localStorage.getItem('long');
    var radius=1;  // location radius which from 1 to 50000 km
    var type='atm'; // this a type which defined in google place service api
     $.ajax({
           type       : "POST",
           url        : "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location="+lat+","+long+"
&radius="+radius+"000&type="+type+"&key=***insert key code here***",
           crossDomain: true,
            dataType   : 'json',
            success    : function(response) {

            //console.log(response.results) // check your response in console

            $.each( response.results, function(key,value ) {
                        $('.content').append('<li>'+value.name +''+'</li>');
            });
            },
            error: function() {
             alert('Something went wrong :(');
             }
            });
        })

       In above code i will get lat and long from local storage which already get its value using 

       Geolocation Plugin onDeviecReady Function and getting value from response.results obaject 

       we are using $.each function for getting value from object.

5. In Index.html write below code in body

<h4>Nearest ATM Bank List</h4>

         <ul class="content">

         </ul>

     In this li tag is created dynamically and will append that li to ul using jquey append function.

  6. Output of the code  & GitHub link for project folder  are below: 

          GitHub Link Click Here :)