Google announced Map Places Picker is deprecated as of January 29, 2019, and will be turned off on July 29, 2019. I recommend you use nativescript-google-maps-sdk to build your own picker instead.
Nativescript plugin for Google Places API. Based on tylergrinn and debevv.
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.
tns plugin add nativescript-plugin-gplaces
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>
- 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>
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 |
- 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
- 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 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)
- Bump googlePlayServicesVersion to 15.0.0, also removed
multiDexEnabled
option in gradle
- Reject
pickPlace()
promise if user cancel the picking action