How to implement Google Places Autocomplete lookup with Angular


#1

I have serched on https://developers.google.com/places/android-api/autocomplete?hl=pt-br but the example but the code doesn´t use on angular with type.

Thanks.


#2

What have you tried so far?

It shouldn’t matter whether you are using Angular, or not when implementing the Google Places SDK.


#3

I have add markers, polilynes and circles, but my app needs to search directions by searchbox or autocomplete so add marker and paint polilyne between markers.


#4

Here’s what I did, which works quite nicely:

Component ngOnInit:

    ngOnInit(): void {
        this.getLocationOnce();

        var myThis = this;
        this.locationAutocomplete.autoCompleteTextView.loadSuggestionsAsync = function (text) {
            var promise = new Promise(function (resolve, reject) {
                http.request({
                    url: "https://maps.googleapis.com/maps/api/place/nearbysearch/json" +
                    "?location=" + myThis.latitude + "," + myThis.longitude +
                    "&radius=50000" +
                    "&keyword=" +text +
                    "&key=YOUR_GOOGLE_API_KEY",
                    method: "GET"
                }).then(function (response) {
                    console.log("Got a response from google places");

                    var responseJSON = response.content.toJSON();

                    var results = responseJSON.results;
                    var items: Array<TokenModel> = new Array();
                    for (var i = 0; i < results.length; i++) {
                        items.push(new TokenModel(results[i].name, null));
                    }
                    resolve(items);
                }, function (e) {
                    reject();
                });
            });

            return promise;
        }


    }
    /**
     * Get the current location of the user
     */
    public getLocationOnce() {

        let myThis = this;

        getCurrentLocation({
            desiredAccuracy: Accuracy.high,
            timeout: 5000
        })
            .then(location => {

                console.log("Location received: " + JSON.stringify(location));
                this.longitude = "" + location.longitude;
                this.latitude = "" + location.latitude;

            }).catch(error => {
            console.log("Location error received: " + error);
        });
    }

The view:

    <ScrollView>
        <StackLayout orientation="vertical">
            <StackLayout paddingTop="30px">

                <Label class="h2" marginTop="10" text="Where are you meeting?"></Label>
                <RadAutoCompleteTextView #locationAutocomplete
                                         [items]="suggestionTokens"
                                         maximumTokensCount="1"
                                         suggestMode="Suggest"
                                         displayMode="Token"
                                         completionMode="Contains"
                                         (onChange)="onSuggestionViewBecameVisible($event)"
                                         (suggestionViewBecameVisible)="onSuggestionViewBecameVisible($event)"
                                         (tokenAdded)="onTokenAdded($event)"
                                         (tokenRemoved)="onTokenRemoved($event)">
                    <SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="120">
                        <ng-template tkSuggestionItemTemplate let-item="item">
                            <StackLayout orientation="vertical" padding="10">
                                <Label [text]="item.text"></Label>
                            </StackLayout>
                        </ng-template>
                    </SuggestionView>
                </RadAutoCompleteTextView>
            </StackLayout>
        </StackLayout>
    </ScrollView>

Autocomplete of address using google places in angular project