2

I'm trying to use the Google Maps plugin for Nativescript (https://github.com/dapriett/nativescript-google-maps-sdk) with Angular 2 and the {N}-Angular router. I have it working in just Nativescript but once I add in Angular 2 and the router I'm failing to get the map to show up in the UI.

Since a <Page> tag doesn't go into an Angular2 {N} component template, I can't use the xmlns:maps="nativescript-google-maps-sdk" namespace on the <Page> to instantiate the <maps:mapView>

The {N} component basics page gives some guidance but it doesn't work in the ways I've tried: https://docs.nativescript.org/ui/ui-with-xml#user-interface-components

Any idea on the proper way to do this is?

app.component.ts

import {Component} from "angular2/core";
import {RouteConfig} from "angular2/router";
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
import {HomeComponent} from "./pages/home/home.component";

@Component({
    selector: "app-main",
    directives: [NS_ROUTER_DIRECTIVES],
    providers: [NS_ROUTER_PROVIDERS],
    template: "<page-router-outlet ></page-router-outlet>"
})
@RouteConfig([
    { path: "/home", component: HomeComponent, as: "Home", useAsDefault: true },
])
export class AppComponent {
}

home.html

<stack-layout orientation="vertical">
    <label [text]="message"></label>
    <mapView [latitude]="latitude" [longitude]="longitude"
                  [zoom]="zoom" [bearing]="bearing"
                  [tilt]="tilt" (mapReady)="OnMapReady"
                  (markerSelect)="onMarkerSelect"
                  (cameraChanged)="onCameraChanged">
    </mapView>
</stack-layout>

home.component.ts

import {Component} from "angular2/core";
var geolocation = require("nativescript-geolocation");
var mapsModule = require("nativescript-google-maps-sdk");
exports.mapView = mapsModule.MapView; //Doesn't work
exports.mapView = new mapsModule.MapView(); //Doesn't work
exports.mapView = mapsModule; //Doesn't work

@Component({
    selector: "home",
    templateUrl: "pages/home/home.html",
})
export class HomeComponent {
    public message:string = "Message set.";
    public latitude:number = 30.0;
    public longitude:number = -100.0;
    public zoom:number = 10;
    public bearing:number = 0;
    public tilt:number = 0;

    constructor() {
        this.message = "Home constructed.";
    }
    OnMapReady(args) { }
    onMarkerSelect(args) { }
    onCameraChanged(args) { }
}
Nick
  • 88
  • 1
  • 6
  • Do the events (cameraChanged) and (markerSelect) work in the above code? because they do not seem to work here.. – Denko Mancheski May 22 '16 at 16:13
  • No, they don't seem to work in the Angular 2 setup like they do in the plain Nativescript sample. I've found you can set them programatically on the MapView object itself in the component to get them to work. I've started building a sample project based on this, still has some issues but you can use the code sample for this: [Nativescript Maps App](https://github.com/nickcoury/nativescript-maps-app/tree/master/app/pages/map) – Nick May 26 '16 at 14:16

2 Answers2

5

You need to register the mapView tag name with the element-registry API e.g.:

https://github.com/NativeScript/nativescript-angular/blob/master/src/nativescript-angular/element-registry.ts#L70-L105

That API isn't documented yet, but we should fix that problem in the coming weeks.

Hristo Deshev
  • 907
  • 6
  • 10
  • 1
    Thanks, worked like a charm. For anyone else running into this issue the code I added to home.component.ts to get the UI tags to work was: `import {registerElement} from 'nativescript-angular/element-registry'; registerElement("MapView", () => require("nativescript-google-maps-sdk").MapView);` – Nick Apr 16 '16 at 01:55
0

I found that using this plugin with ns angualr 2 I had to manually add the applicationID to the build.gradle file in root/platforms/adnroid under:

android{
    defaultConfig{
        applicationId "org.nativescript.my_app_name"

This was after i used tns plugin add nativescript-google-sdk.

Otherwise the app was building successfully but when deployed would not install on device or emulator and checking the logcat, I find this odd as nativescript would not have you edit the build.gradle file ever. Now it works great using the code from other answer

Mark Farrell
  • 39
  • 6