The second method is to allow the user to query the location database manually. In this case we use a set of nested directives and the Google Auto-complete service.
Location-Predictions directive generates a search box and sets up the Google Auto-complete service. The auto-complete service fetches predictions based on the user submitted query string.
The location-predictions directive generates a set of options which are passed into the Location-Lookup directive. Which in turn displays them as a list for the user to choose from. Once the user picks a location it uses the Google Places service to fetch the geo-location data for it.
The Google Places Library has certain logo requirements. In this case we are not using a map therefore, we are required to display a Powered by Google logo along with the data.
Both, location-lookup and location picker, directives are fairly straight forward to use. They essentially behave as a
<select> element. The selection is captured using
ng-model. Optionally you can limit the number of choices by using the
The selection returns data of the following type: