Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

An AngularJs Directive to Support Google Places Autocomplete API

DZone's Guide to

An AngularJs Directive to Support Google Places Autocomplete API

Are you a fan of Google's automcomplete feature? Learn how to make your own, using Google Places API, and add an extra element of UX to your site.

· Web Dev Zone
Free Resource

Should you build your own web experimentation solution? Download this whitepaper by Optimizely to find out.

What’s up guys, Eze here. Today I want to talk to 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 is 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 to add the directive to the input control we want to convert into an autocomplete textbox 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 for the autocomplete, the directive will set it up in the ng-model property with the formatted address from the Google Places API; this is what we show in the textbox element. In the details object, we will have the complete object returned to the API. In this object, we have really useful information related the place, like the geographical information (latitude and longitude), photos, descriptions, rates, etc.

autocomplete_returns.PNG

Improvements to the Original Project

I've added the possibility of using reverse geocoding to this project. If you already have theplace_id property, or if you have the latitude and longitude of the place, you can provide it to the directive in order to initialize the component. Also, I merged almost all the pending pull requests in the original project.

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.

Implementing an Experimentation Solution: Choosing whether to build or buy?

Topics:
google places ,autocomplete ,angularjs ,web dev ,api

Published at DZone with permission of Ezequiel Reyno. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}