An AngularJs directive to support Google Places Autocomplete API

What’s up guys, Eze is here. Today I want to talk you about a directive I’ve been working on which is a wrapper for Google Places Autocomplete using the Google Places API. As always you can find the code here. This directive is an improvement for a discontinued project.

bower.PNG

Using the directive

This directive it’s really easy to use. First we need to get the code and you can do it via bower using the following command bower install ng-autocomplete-places –save.  Once we reference the file in our html we are almost ready to go. As you can see in the code below we only need add the directive to the input control we want to convert into an autocomplete text-box  and then define the object in our AngularJs controller.

<input type="text" ng-places-autocomplete ng-model="vm.autocomplete" class="form-control" options="vm.options" details="vm.details" initial-address="vm.initialAddress"/>
 vm.result = '';
 vm.autocomplete = {};
 vm.options = {};
 vm.initialAddress = null;

autocomplete.gif

After we select one of the options of the autocomplete, the directive setup into the ng-model property the formatted address from Google Places API, this is what we show into the text-box element. Into the details object we will have available the complete object returned the API. In this object we have really useful information related the place like the geometry information (latitude and longitude), photos, descriptions, rates etc.

autocomplete_returns.PNG

Improvements to the original project

I’ve added to this project the possibility to use a reverse geocoding. If you already have the place_id property or if you have the latitude and longitud of the place you can provide it to the directive in order to initialize the component. Also I merged almost all the pending pull request in the original project.

For a complete documentation of the directive please use this link.

For a complete reference of Google Maps API use this link

If you found this post useful please don’t forget to press the like button and share it. If you are in doubt don’t hesitate to ask a question and as always thank you for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s