NativesScript Google Place SDK

A NativesScript plugin for Google Places SDK.

Documentation:

• Places SDK for Android
• Places SDK for iOS

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 | | --- | --- | --- | address | string | Address | id | string | Id | lat_lng | object | Coordinates | name | string | Place name | phone_number | string | Phone number | price_level | number | Pricing | rating | number | Rating | user_ratings_total | number | Total ratings | utc_offset_minutes | number | UTC offset in minutes | viewport | object | Viewport | website_uri | string | URL |

Example

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

License

MIT