NativesScript Google Place SDK

A NativesScript plugin for Google Places SDK.

Documentation:

Requirements

Enable Google Places API if you have not already done so.

Configure skip library check in tsconfig.json

{
  "compilerOptions": {
    ...
    "skipLibCheck": true
    ...
  }
}

Installation

tns plugin add nativescript-google-place-sdk

Usage

NativeScript

Initialize the Place SDK

app.ts

...
Place.initialize(isAndroid ? 'GOOGLE_PLACE_ANDROID_API_KEY' : 'GOOGLE_PLACE_IOS_API_KEY');
...

Show the Autocomplete UI

my-awesome-page.xml

<Button text="Search" tap="search()"></Button>

my-awesome-page.ts

export function search(): void {
    PlaceAutocomplete.show()
    .then(
        (result) => {
            if (result) {
                console.log('Place Details:', result);
            }
        },
        (err) => console.error(err)
    );
}

NativeScript + Angular

Initialize the Place SDK

app.component.ts

@Component({
    moduleId: module.id,
    selector: 'ns-app',
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
        Place.initialize(isAndroid ? 'GOOGLE_PLACE_ANDROID_API_KEY' : 'GOOGLE_PLACE_IOS_API_KEY');
    }
}

Show the Autocomplete UI

my-awesome.component.html

<Button [text]="Search" (tap)="search()"></Button>

my-awesome.component.ts

@Component({
    moduleId: module.id,
    selector: 'ns-awesome',
    templateUrl: 'my-awesome.component.html'
})
export class MyAwesomeComponent {
    search(): void {
        PlaceAutocomplete.show()
        .then(
            (result) => {
                if (result) {
                    console.log('Place Details:', result);
                }
            },
            (err) => console.error(err)
        );
    }
}

API

Place

initialize(apiKey)

Property	Default	Description
apiKey	undefined	Google Place API key

Example

Place.initialize('GOOGLE_PLACE_API_KEY');

Autocomplete

show(options)

Property	Default	Description
fields	undefined	Define the types of field to retrieve. By default will retrieve all types.
ios	undefined	iOS related options
ios.appearance	undefined	iOS appearance options. See documentation for more info.
ios.appearance.primaryTextColor	undefined	Primary text color
ios.appearance.primaryTextHighlightColor	undefined	Primary text highlight color
ios.appearance.secondaryTextColor	undefined	Secondary text color
ios.appearance.tableCellBackgroundColor	undefined	Table cell background color
ios.appearance.tableCellSeparatorColor	undefined	Table cell separator color
ios.appearance.tintColor	undefined	Tint color
locationBias.southwest	undefined	Southwest bound
locationBias.northeast	undefined	Northeast bound

Field	Data Type	Description

Example

PlaceAutocomplete.show({ fields: ['name'] })
.then(
    (result) => {
        if (result) {
            console.log('Place Details:', result);
        }
    },
    (err) => console.error(err)
);

License

MIT