title: Wiring up Google Maps Nativescript plugin with Angular 2
body: <p>I'm trying to use the Google Maps plugin for Nativescript (<a href="https://github.com/dapriett/nativescript-google-maps-sdk" rel="nofollow">https://github.com/dapriett/nativescript-google-maps-sdk</a>) 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.</p>
  
  <p>Since a <code>&lt;Page&gt;</code> tag doesn't go into an Angular2 {N} component template, I can't use the <code>xmlns:maps="nativescript-google-maps-sdk"</code> namespace on the <code>&lt;Page&gt;</code> to instantiate the <code>&lt;maps:mapView&gt;</code></p>
  
  <p>The {N} component basics page gives some guidance but it doesn't work in the ways I've tried: <a href="https://docs.nativescript.org/ui/ui-with-xml#user-interface-components" rel="nofollow">https://docs.nativescript.org/ui/ui-with-xml#user-interface-components</a></p>
  
  <p>Any idea on the proper way to do this is?</p>
  
  <p>app.component.ts</p>
  
  <pre><code>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: "&lt;page-router-outlet &gt;&lt;/page-router-outlet&gt;"
  })
  @RouteConfig([
      { path: "/home", component: HomeComponent, as: "Home", useAsDefault: true },
  ])
  export class AppComponent {
  }
  </code></pre>
  
  <p>home.html</p>
  
  <pre><code>&lt;stack-layout orientation="vertical"&gt;
      &lt;label [text]="message"&gt;&lt;/label&gt;
      &lt;mapView [latitude]="latitude" [longitude]="longitude"
                    [zoom]="zoom" [bearing]="bearing"
                    [tilt]="tilt" (mapReady)="OnMapReady"
                    (markerSelect)="onMarkerSelect"
                    (cameraChanged)="onCameraChanged"&gt;
      &lt;/mapView&gt;
  &lt;/stack-layout&gt;
  </code></pre>
  
  <p>home.component.ts</p>
  
  <pre><code>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) { }
  }
  </code></pre>