Over a million developers have joined DZone.

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

Learn how to add document editing and viewing to your web app on .Net (C#), Node.JS, Java, PHP, Ruby, etc.

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.


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;


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.


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.

Extend your web service functionality with docx, xlsx and pptx editing. Check out ONLYOFFICE document editors for integration.

google places ,autocomplete ,angularjs ,web dev ,api

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}