Google Driving Directions using Google Auto Complete in Angular JS

Google has provided a plugin to get the driving directions for a particular address, while we type the address it suggests the all available possible matches with the same pattern of keys typed in the text box. This particular process can be termed as google driving directions.

Similarly, Angular JS also has a plugin for getting google driving directions which can be termed as angular google places and this plugin can be installed from either the terminal window of Webstorm IDE or through Command Prompt.

There are many other ways of achieving this google driving directions like using Otd Directives or Custom Directives. Below is one of the way:

Installing Google-Places plugin using angular js:
1)Google places dependency can be installed from Command Prompt by navigating to the path where our application is deployed and from there we need to install using bower using the below command.

bower install angular-google-places-autocomplete

2)Once the plugin is installed check in the bower components of your application for angular-google-places-autocomplete plugin.

3)After checking the presence of the installed plugin in bower components then start adding the script files and css files for the plugin.
Add them to the index.html file in the below order.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="/bower_components/angular-google-places-autocomplete/src/autocomplete.js"></script>

We need to add the google-apis script file also as the google places autocomplete is somewhat related to google maps.

4)After adding the js/script file we must make sure that the text box appears a bit clean. So it is better to include the CSS files for a better view.
<link rel="stylesheet" href="/bower_components/angular-google-places-autocomplete/src/autocomplete.css">

5)After adding the script files and CSS files now we need to add the dependency for the plugin in App.js file.

Add the following text in enclosed commas so that the application detects the plugin.

                                'google.places'

6)After adding the dependency in App.js file we must make sure that the plugin’s affect is now felt in the html view.

Go to the page where you need the google driving directions for the text box and add gm-places-autocomplete and ng-model=’autocomplete’ to the html code as shown below:

 <input type="text" class="form-control" placeholder="Street Name" gm-places-autocomplete ng-model="autocomplete"/>

7)After adding the code in the view part we need to add the below code in respective controller for google-places.

 $scope.$on('gmPlacesAutocomplete::placeChanged', function(){
    var location = $scope.autocomplete.getPlace().geometry.location;
    $scope.$apply();
  });

8)Please find the detailed screen shot of the process for getting the google driving directions.

When I type Kashmir in the text box which already has a google places directive 

attached to this the application matches the pattern of the word with the current word and displays all the possible destinations with the same pattern just like the above mentioned way.

When the user selects one address from the list the selected value will be populated in the text box.

In this way we can achieve google driving directions using google places dependency in Angular JS.

Thanks,

Venkata Shanmukha Korada.

venkat.shanmukh0015@gmail.com

Mouritech PVT Ltd

www.mouritech.com