Ionic 2 + Ionic Native + Google Maps Plugin

googlemap.component.ts

import { Component, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
import { Platform } from 'ionic-angular';
import { GoogleMap } from 'ionic-native';
@Component({
  selector: 'GoogleMap',
  template: '<div [id]="id" [style.height]="height" [style.width]="width" style="display: block;"></div>'
})
export class GoogleMapComponent implements AfterViewInit {
  @Input() id: string = 'GoogleMap';
  @Input() height: string = '100%';
  @Input() width: string = '100%';
  @Output() init: EventEmitter<GoogleMap> = new EventEmitter<GoogleMap>();
  public map: GoogleMap;
  constructor(private platform: Platform){}
  ngAfterViewInit(): void {
    this.platform.ready()
      .then(()=>{
        GoogleMap.isAvailable()
          .then((isAvailable, message)=>{
            if(!isAvailable) return console.warn(message);
            this.map = new GoogleMap(this.id);
            this.init.emit(this.map);
          });
      });
  }
}

map.page.ts

import {Component} from '@angular/core';
import {
  GoogleMap, CameraPosition, GoogleMapsLatLng, GoogleMapsMarkerOptions,
  GoogleMapsMarker
} from 'ionic-native';
@Component({
  template: `<ion-header>
    <ion-navbar>
      <ion-title>Map</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>
    <GoogleMap (init)="onMapInit($event)"></GoogleMap>
  </ion-content>`,
  directives: [GoogleMapComponent]
})
export class MapPage {

  onMapInit(map: GoogleMap) {
    let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);
    let position: CameraPosition = {
      target: ionic,
      zoom: 18,
      tilt: 30
    };
    map.moveCamera(position);
    let markerOptions: GoogleMapsMarkerOptions = {
      position: ionic,
      title: 'Ionic'
    };
    map.addMarker(markerOptions)
      .then(
        (marker: GoogleMapsMarker) => {
          marker.showInfoWindow();
        }
      );
  }

}