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.
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.
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">
<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