Skip to content

benedictkhoo/nativescript-google-places-sdk

Repository files navigation

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
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