nativescript-plugin-gplaces

Nativescript Plugin GPlaces

Nativescript plugin for Google Places API. Based on tylergrinn and debevv.

Updates

Prerequisites

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:

• click here then click "GET A KEY".
• Go to the Google developer console and click "Credentials" on the left.
• Click the first key in the list which is the one you just created and under "Key restriction", select Android apps.
• 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:

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

Installation

tns plugin add nativescript-plugin-gplaces

Usage

To import:

import * as GooglePlaces from 'nativescript-plugin-gplaces';

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

GooglePlaces.init();

To have the user pick a place:

GooglePlaces.pickPlace()
    .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
    }
}

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

To get places using ids:

GooglePlaces.getPlacesById([
    "ChIJ4zPXqIiAhYAR31X3S64T6Uw",
    "ChIJ6zMe3oWAhYARaZ33Z1BAMRo",
    "ChIJAUWoGIaAhYARQ6zvky_f10Q"
])
    .then((places: GooglePlaces.Place[]) => {
        places.forEach(place => console.log(place.name));
    })
    .catch(error => console.log(error));

To get a static map:

this.staticMapUrl = GooglePlaces.getStaticMapUrl(
    place, 
    { 
        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>

API

Place
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)
addressComponents(ios only)	[type:string]:string	Object of addressComponents (available types)

Location
latitude	number	latitude in degrees
longitude	number	longitude in degrees

ViewPort
southWest	Location	Default SouthWest corner of the map
northEast	Location	Default NorthEast corner of the map

Updates

v1.1.2

• 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-gplaces && npm run configure

v1.2.0

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

v1.2.1

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

v1.3.0

• 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

v1.3.1

• Added "types" to Place definition.

v2.4.1 - v2.4.4

• Added longitude and latitude in returning object. Credit to debevv.
• Added addressComponents in ios (not available in android).
• Support open from modal in ios (see related bug)

v2.4.5

• Bump googlePlayServicesVersion to 15.0.0, also removed multiDexEnabled option in gradle

v2.4.6

• Reject pickPlace() promise if user cancel the picking action