TypeScript icon, indicating that this package has built-in type declarations

1.4.1 • Public • Published

Nativescript Plugin Google Places

npm version

Nativescript plugin for Google Places API

Android Android



Set up the Google Places API keys before installing this plugin, the setup script will ask for them.

For the iOS key, click here then click "GET A KEY".

For the Android key:

  1. click here then click "GET A KEY".
  2. Go to the Google developer console and click "Credentials" on the left.
  3. Click the first key in the list which is the one you just created and under "Key restriction", select Android apps.
  4. Enter in your package name and SHA-1 certificate fingerprint and press save at the bottom. You may want to add your debug and production SHA-1 fingerprints.

If you want to use the getStaticMapUrl function you'll need to create a browser key:

  1. click here then click "GET A KEY".
  2. Go to the Google developer console and click "Library" on the left.
  3. Find "Google Static Maps API" and click the "URL signing secret" tab.
  4. Click the "Allow unsigned usage" button.
  5. Click "Credentials" on the left, your browser key will be the first key in the list.


tns plugin add nativescript-plugin-google-places


To import:

import * as GooglePlaces from 'nativescript-plugin-google-places';

Run the init function in the App.Module constructor if you're using angular or the app.ts file otherwise


To have the user pick a place:

    .then(place => console.log(JSON.stringify(place)))
    .catch(error => console.log(error));

To set a default location for the map to start on:

let center: Location = {
    latitude: -33.865143,
    longitude: 151.2099
let viewport = {
    northEast: {
        latitude: center.latitude + 0.001,
        longitude: center.longitude + 0.001
    southWest: {
        latitude: center.latitude - 0.001,
        longitude: center.longitude - 0.001
    .then(place => console.log(JSON.stringify(place)))
    .catch(error => console.log(error));

To get places using ids:

    .then((places: GooglePlaces.Place[]) => {
        places.forEach(place => console.log(;
    .catch(error => console.log(error));

To get a static map:

this.staticMapUrl = GooglePlaces.getStaticMapUrl(
        width: 250,
        height: 250

Or by address:

this.staticMapUrl = GooglePlaces.getStaticMapUrlByAddress(
        width: 250,
        height: 250
<Image *ngIf="staticMapUrl" [src]="staticMapUrl" width="250" height="250"></Image>

Best Practices

  • Google recommends always displaying the attributions string, when available, when using the Place data.
  • Google requires the "Powered by Google" picture next to Place data whenever the data is used outside of the map. The picture is installed by the plugin if you allow it to during the setup script.

You can use the light version:

<Image res="res://powered_by_google_light" stretch="none"></Image>

or the dark version:

<Image res="res://powered_by_google_dark" stretch="none"></Image>


name string The name of the place
address string Readable address
id string Unique ID of the place
attributions string Attributions of the place
types string[] List of place types (more info)
latitude number latitude in degrees
longitude number longitude in degrees
southWest Location Default SouthWest corner of the map
northEast Location Default NorthEast corner of the map



  • Fixed iOS bug where panning the map would destroy the link to resolve the promise, leaving the user stuck in the map view.
  • Installer script now adds iOS images manually since the cocoapods version was inaccessible. If updating rather than installing for the first time, run:
cd node_modules/nativescript-plugin-google-places && npm run configure


  • Added getPlacesById(id: string[]): Place[]
  • Fixed Android error where place returned by placepicker would not have all of the info


  • Fixed setup error where ios keys were not being replaced after reconfiguring
  • Fixed getPlacesById error where ios results were being returned in reverse order
  • Added error handling to Android for getPlacesById if not all places can be found

Now you can be sure the places array you get from getPlacesById has the same number of elements and is in the same order as the ids you send it.


  • Added getStaticMapUrl(place: Place, options: { width: number, height: number }): string
  • Updated installer to request browser key for the static maps. Run npm run configure to update


  • Added "types" to Place definition.


  • Added getStaticMapUrlByAddress(address: string, options: { width: number, height: number }): string

Package Sidebar


npm i nativescript-plugin-google-places

Weekly Downloads






Last publish


  • tygrinn