Skip to content

Commit 1ba786b

Browse files
kefahBkefahB
committed
First commit
1 parent 3988c01 commit 1ba786b

File tree

8 files changed

+397
-40
lines changed

8 files changed

+397
-40
lines changed

‎README.md‎

Lines changed: 309 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,315 @@
1-
# @kefah/nativescript-google-maps
1+
NativeScript plugin for the Google Maps SDK
2+
================
23

3-
```javascript
4-
ns plugin add @kefah/nativescript-google-maps
4+
### This is a cross-platform (iOS & Android) Nativescript plugin for the [Google Maps API](https://developers.google.com/maps/).
5+
===
6+
>### This project is a fork from [dapriett/nativescript-google-maps-sdk](https://github.com/dapriett/nativescript-google-maps-sdk) I've created it beaucse of the owner doesn't mantain it often.
7+
8+
>This version include the new maps Renderer for android that Google Maps just [annonce it](https://developers.google.com/maps/documentation/android-sdk/renderer)
9+
10+
[![NPM version][npm-image]][npm-url]
11+
12+
[npm-url]: https://www.npmjs.com/package/@kefah/nativescript-google-maps
13+
[npm-image]: https://www.npmjs.com/package/@kefah/nativescript-google-maps.svg
14+
15+
[![NPM](https://nodei.co/npm/nativescript-google-maps-sdk.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/@kefah/nativescript-google-maps)
16+
17+
Prerequisites
18+
===
19+
**iOS** - [Cocoapods](https://guides.cocoapods.org/using/getting-started.html#getting-started) must be installed.
20+
21+
**Android** - The latest version of the [Google Play Services SDK](https://developer.android.com/sdk/installing/adding-packages.html) must be installed.
22+
23+
**Google Maps API Key** - Visit the [Google Developers Console](https://console.developers.google.com), create a project, and enable the `Google Maps Android API` and `Google Maps SDK for iOS` APIs. Then, under credentials, create an API key.
24+
25+
Installation
26+
===
27+
28+
Install the plugin using the NativeScript CLI tooling:
29+
30+
```bash
31+
tns plugin add @kefah/nativescript-google-maps
32+
```
33+
34+
Setup
35+
===
36+
37+
See demo code included [here](https://github.com/kefahB/nativescript-google-maps.git/tree/master/demo)
38+
39+
See a live demo [here](https://tinyurl.com/m7ndp7u)
40+
41+
## Configure API Key for Android
42+
43+
### Nativescript < 4
44+
45+
Start by copying the necessary template resource files in to the Android app resources folder:
46+
47+
```bash
48+
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/
49+
```
50+
Next, modify your `app/App_Resources/Android/values/nativescript_google_maps_api.xml` file by uncommenting the `nativescript_google_maps_api_key` string, and replace `PUT_API_KEY_HERE` with the API key you created earlier.
51+
52+
Finally, modify your `app/App_Resources/Android/AndroidManifest.xml` file by inserting the following in between the `<application>` tags:
53+
54+
```xml
55+
<meta-data
56+
android:name="com.google.android.geo.API_KEY"
57+
android:value="@string/nativescript_google_maps_api_key" />
58+
```
59+
60+
### Nativescript 4+
61+
62+
Start by copying the necessary template resource files in to the Android app resources folder:
63+
64+
```bash
65+
cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/src/main/res
66+
```
67+
68+
Next, modify your `app/App_Resources/Android/src/main/res/values/nativescript_google_maps_api.xml` file by uncommenting the `nativescript_google_maps_api_key` string, and replace `PUT_API_KEY_HERE` with the API key you created earlier.
69+
70+
Finally, modify your `app/App_Resources/Android/src/main/AndroidManifest.xml` file by inserting the following in between your `<application>` tags:
71+
72+
```xml
73+
<meta-data
74+
android:name="com.google.android.geo.API_KEY"
75+
android:value="@string/nativescript_google_maps_api_key" />
76+
```
77+
78+
The plugin will default to the latest available version of the Google Play Services SDK for Android. If you need to change the version, you can add a `project.ext` property, `googlePlayServicesVersion`, like so:
79+
80+
```ts
81+
// /app/App_Resources/Android/app.gradle
82+
83+
project.ext {
84+
googlePlayServicesVersion = "+"
85+
}
586
```
687

7-
## Usage
88+
## Configure API Key for iOS
89+
90+
In your `app.js`, use the following code to add your API key (replace `PUT_API_KEY_HERE` with the API key you created earlier):
91+
92+
```ts
93+
if (application.ios) {
94+
GMSServices.provideAPIKey("PUT_API_KEY_HERE");
95+
}
96+
```
97+
If you are using Angular, modify your `app.module.ts` as follows:
98+
```ts
99+
import * as platform from "platform";
100+
declare var GMSServices: any;
101+
102+
....
103+
104+
if (platform.isIOS) {
105+
GMSServices.provideAPIKey("PUT_API_KEY_HERE");
106+
}
107+
```
108+
109+
## Adding the MapView
110+
111+
Modify your view by adding the `xmlns:maps="nativescript-google-maps-sdk"` namespace to your `<Page>` tag, then use the `<maps:mapView />` tag to create the MapView:
112+
113+
```xml
114+
<!-- /app/main-page.xml -->
115+
116+
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
117+
xmlns:lm="@kefah/nativescript-google-maps" navigatingTo="navigatingTo" loaded="pageLoaded" class="page">
118+
<Page.actionBar>
119+
<ActionBar title="nativescript-google-maps" icon="" class="action-bar">
120+
</ActionBar>
121+
</Page.actionBar>
122+
<GridLayout>
123+
<lm:GoogleMaps
124+
latitude="{{ latitude }}" longitude="{{ longitude }}"
125+
zoom="{{ zoom }}" minZoom="{{ minZoom }}" maxZoom="{{ maxZoom }}"
126+
tilt="{{ tilt }}" bearing="{{ bearing }}"
127+
mapAnimationsEnabled="{{ mapAnimationsEnabled }}"
128+
i-padding="50,50,50,50" padding="{{ padding }}"
129+
mapReady="onMapReady"
130+
coordinateTapped="onCoordinateTapped"
131+
markerSelect="onMarkerEvent"
132+
markerBeginDragging="onMarkerEvent" markerEndDragging="onMarkerEvent" markerDrag="onMarkerEvent"
133+
markerInfoWindowTapped="onMarkerEvent" markerInfoWindowClosed="onMarkerEvent"
134+
cameraChanged="onCameraChanged"
135+
cameraMove="onCameraMove"
136+
indoorBuildingFocused="onIndoorBuildingFocused"
137+
indoorLevelActivated="onIndoorLevelActivated">
138+
</lm:GoogleMaps>
139+
</GridLayout>
140+
</Page>
141+
```
142+
143+
## Properties
144+
145+
The following properties are available for adjusting the camera view:
146+
147+
| Property | Description and Data Type
148+
:------------- | :---------------------------------
149+
`latitude` | Latitude, in degrees: `number`
150+
`longitude` | Longitude, in degrees: `number`
151+
`zoom` | Zoom level (described [here](https://developers.google.com/maps/documentation/javascript/tutorial#zoom-levels)): `number`
152+
`bearing` | Bearing, in degrees: `number`
153+
`tilt` | Tilt, in degrees: `number`
154+
`padding` | Top, bottom, left and right padding amounts, in Device Independent Pixels: `number[]` (array)
155+
`mapAnimationsEnabled` | Whether or not to animate camera changes: `Boolean`
156+
157+
## Events
158+
159+
The following events are available:
160+
161+
| Event | Description
162+
:------------- | :---------------------------------
163+
`mapReady` | Fires when the MapView is ready for use
164+
`myLocationTapped` | Fires when the 'My Location' button is tapped
165+
`coordinateTapped` | Fires when a coordinate is tapped on the map
166+
`coordinateLongPress` | Fires when a coordinate is long-pressed on the map
167+
`markerSelect` | Fires when a marker is selected
168+
`markerBeginDragging` | Fires when a marker begins dragging
169+
`markerEndDragging` | Fires when a marker ends dragging
170+
`markerDrag` | Fires repeatedly while a marker is being dragged
171+
`markerInfoWindowTapped` | Fires when a marker's info window is tapped
172+
`markerInfoWindowClosed` | Fires when a marker's info window is closed
173+
`shapeSelect` | Fires when a shape (e.g., `Circle`, `Polygon`, `Polyline`) is selected *(Note: you must explicity configure `shape.clickable = true;` for this event to fire)*
174+
`cameraChanged` | Fires after the camera has changed
175+
`cameraMove` | Fires repeatedly while the camera is moving
176+
`indoorBuildingFocused` | Fires when a building is focused on (the building currently centered, selected by the user or by the location provider)
177+
`indoorLevelActivated` | Fires when the level of the focused building changes
178+
179+
## Native Map Object
180+
181+
The MapView's `gMap` property gives you access to the platform's native map object–––consult the appropriate SDK reference on how to use it: [iOS](https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_map_view) | [Android](https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap)
182+
183+
## UI Settings
184+
185+
You can adjust the map's UI settings after the `mapReady` event has fired by configuring the following properties on `mapView.settings`:
186+
187+
| Property | Description and Data Type
188+
:--------------- |:---------------------------------
189+
`compassEnabled` | Whether the compass is enabled or not: `Boolean`
190+
`indoorLevelPickerEnabled` | Whether the indoor level picker is enabled or not: `Boolean`
191+
`mapToolbarEnabled` | ** **Android only** ** Whether the map toolbar is enabled or not: `Boolean`
192+
`myLocationButtonEnabled` | Whether the 'My Location' button is enabled or not: `Boolean`
193+
`rotateGesturesEnabled` | Whether the compass is enabled or not: `Boolean`
194+
`scrollGesturesEnabled` | Whether map scroll gestures are enabled or not: `Boolean`
195+
`tiltGesturesEnabled` | Whether map tilt gestures are enabled or not: `Boolean`
196+
`zoomGesturesEnabled` | Whether map zoom gestures are enabled or not: `Boolean`
197+
`zoomControlsEnabled` | ** **Android only** ** Whether map zoom controls are enabled or not: `Boolean`
198+
199+
## Styling
200+
201+
Use `gMap.setStyle(style);` to set the map's styling ([Google Maps Style Reference](https://developers.google.com/maps/documentation/android-api/style-reference) | [Styling Wizard](https://mapstyle.withgoogle.com/)).
202+
203+
### Angular
204+
205+
Use `this.mapView.setStyle(<Style>JSON.parse(this.styles));` inside of the `onMapReady` event handler. In this example, `this.mapView` is the `MapView` object and `this.styles` is a reference to a JSON file that was created using the [Styling Wizard](https://mapstyle.withgoogle.com/). The `<Style>` type was imported from the plugin as `{ Style }`.
206+
207+
## Basic Example
208+
209+
```ts
210+
// /app/main-page.js
211+
import { Observable, EventData, Page, Color, Application } from '@nativescript/core';
212+
import { DemoSharedNativescriptGoogleMaps } from '@demo/shared';
213+
import { Bounds, Circle, GoogleMaps, Marker, Polygon, Polyline, Position } from '@kefah/nativescript-google-maps';
214+
import * as permissions from "nativescript-permissions";
215+
let mapView = null;
216+
217+
let vmModule: DemoModel;
218+
let style = require('./map-style.json');
219+
220+
export function navigatingTo(args: EventData) {
221+
requestPermissions()
222+
const page = <Page>args.object;
223+
page.bindingContext = new DemoModel();
224+
vmModule = page.bindingContext;
225+
}
226+
227+
export function onMapReady(args) {
228+
mapView = args.object;
229+
230+
console.log("onMapReady");
231+
mapView.settings.compassEnabled = true;
232+
mapView.settings.myLocationButtonEnabled = true;
233+
234+
console.log("Setting a marker...");
235+
let marker = new Marker();
236+
marker.position = Position.positionFromLatLng(-33.86, 151.20);
237+
marker.title = "Sydney";
238+
marker.snippet = "Australia";
239+
marker.color = "green";
240+
marker.userData = {index: 1};
241+
marker.draggable = true;
242+
mapView.addMarker(marker);
243+
}
244+
245+
```
246+
247+
## Custom Info Windows (Beta)
248+
249+
To use custom marker info windows, define a template in your view like so:
250+
251+
```xml
252+
<!-- /app/main-page.xml -->
253+
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
254+
xmlns:lm="@kefah/nativescript-google-maps" navigatingTo="navigatingTo" loaded="pageLoaded" class="page">
255+
<Page.actionBar>
256+
<ActionBar title="nativescript-google-maps" icon="" class="action-bar">
257+
</ActionBar>
258+
</Page.actionBar>
259+
<GridLayout>
260+
<lm:GoogleMaps
261+
latitude="{{ latitude }}" longitude="{{ longitude }}"
262+
zoom="{{ zoom }}" minZoom="{{ minZoom }}" maxZoom="{{ maxZoom }}"
263+
tilt="{{ tilt }}" bearing="{{ bearing }}"
264+
mapAnimationsEnabled="{{ mapAnimationsEnabled }}"
265+
i-padding="50,50,50,50" padding="{{ padding }}"
266+
mapReady="onMapReady"
267+
coordinateTapped="onCoordinateTapped"
268+
markerSelect="onMarkerEvent"
269+
markerBeginDragging="onMarkerEvent" markerEndDragging="onMarkerEvent" markerDrag="onMarkerEvent"
270+
markerInfoWindowTapped="onMarkerEvent" markerInfoWindowClosed="onMarkerEvent"
271+
cameraChanged="onCameraChanged"
272+
cameraMove="onCameraMove"
273+
indoorBuildingFocused="onIndoorBuildingFocused"
274+
indoorLevelActivated="onIndoorLevelActivated">
275+
<lm:GoogleMaps.infoWindowTemplate>
276+
<StackLayout orientation="vertical" width="200" >
277+
<Label text="{{title}}" className="title" width="125" />
278+
<Label text="{{snippet}}" className="snippet" width="125" />
279+
<Label text="{{'LAT: ' + position.latitude}}" className="infoWindowCoordinates" />
280+
<Label text="{{'LON: ' + position.longitude}}" className="infoWindowCoordinates" />
281+
</StackLayout>
282+
</lm:GoogleMaps.infoWindowTemplate>
283+
</lm:GoogleMaps>
284+
</GridLayout>
285+
</Page>
286+
```
287+
288+
...and set the `infoWindowTemplate` property like so:
289+
290+
```ts
291+
var marker = new mapsModule.Marker();
292+
marker.infoWindowTemplate = 'testWindow';
293+
```
294+
295+
This will configure the marker to use the info window template with the given key. If no template with that key is found, then it will use the default info window template.
296+
297+
** *Known issue:* remote images fail to display in iOS info windows (local images work fine)
298+
299+
## Usage with Angular
300+
301+
See Angular demo code included [here](https://github.com/kefahB/nativescript-google-maps.git/tree/master/ng-demo)
302+
303+
304+
# Clustering Support (Issue [#57](https://github.com/dapriett/nativescript-google-maps-sdk/issues/57))
305+
306+
There is a seperate plugin in development thanks to [@naderio](https://github.com/naderio): see [nativescript-google-maps-utils](https://github.com/naderio/nativescript-google-maps-utils).
307+
308+
# Get Help
309+
310+
Checking with the Nativescript community is your best bet for getting help.
8311

9-
// TODO
312+
If you have a question, start by seeing if anyone else has encountered the scenario on [Stack Overflow](http://stackoverflow.com/questions/tagged/nativescript). If you cannot find any information, try [asking the question yourself](http://stackoverflow.com/questions/ask/advice?). Make sure to add any details needed to recreate the issue and include the “NativeScript” and "google-maps" tags, so your question is visible to the NativeScript community.
10313

11-
## License
12314

13-
Apache License Version 2.0
315+
Finally, if you have found an issue with the NativeScript Google Maps SDK itself, or requesting a new feature, please report them here [Issues](https://github.com/kefahB/nativescript-google-maps.git/issues).

‎package.json‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
{
2-
"name": "@kefah/nativescript-google-maps",
3-
"version": "1.0.0",
4-
"description": "Add a plugin description",
5-
"main": "index",
6-
"typings": "index.d.ts",
7-
"nativescript": {
8-
"platforms": {
9-
"ios": "6.0.0",
10-
"android": "6.0.0"
11-
}
12-
},
13-
"repository": {
14-
"type": "git",
15-
"url": "https://github.com/NativeScript/plugins.git"
16-
},
17-
"keywords": [
18-
"NativeScript",
19-
"JavaScript",
20-
"TypeScript",
21-
"iOS",
22-
"Android"
23-
],
24-
"author": {
25-
"name": "KefahB",
26-
"email": "[email protected]"
27-
},
28-
"bugs": {
29-
"url": "https://github.com/NativeScript/plugins/issues"
30-
},
31-
"license": "Apache-2.0",
32-
"homepage": "https://github.com/NativeScript/plugins",
33-
"readmeFilename": "README.md",
34-
"bootstrapper": "@nativescript/plugin-seed"
2+
"name": "@kefah/nativescript-google-maps",
3+
"version": "1.0.0",
4+
"description": "Add a plugin description",
5+
"main": "index",
6+
"typings": "index.d.ts",
7+
"nativescript": {
8+
"platforms": {
9+
"ios": "6.0.0",
10+
"android": "6.0.0"
11+
}
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "https://github.com/kefahB/nativescript-google-maps.git"
16+
},
17+
"keywords": [
18+
"NativeScript",
19+
"JavaScript",
20+
"TypeScript",
21+
"iOS",
22+
"Android"
23+
],
24+
"author": {
25+
"name": "KefahB",
26+
"email": "[email protected]"
27+
},
28+
"bugs": {
29+
"url": "https://github.com/kefahB/nativescript-google-maps.git/issues"
30+
},
31+
"license": "Apache-2.0",
32+
"homepage": "https://github.com/kefahB/nativescript-google-maps.git",
33+
"readmeFilename": "README.md",
34+
"bootstrapper": "@nativescript/plugin-seed"
3535
}

0 commit comments

Comments
 (0)