import { Component } from '@angular/core' ; import { IonicPage , LoadingController } from 'ionic-angular' ; import { GoogleMaps , GoogleMap , GoogleMapsEvent , KmlOverlay , Polygon , ILatLng } from '@ionic-native/google-maps' ; /**
 * Generated class for the KmlOverlayPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */ @ IonicPage ( ) @ Component ( { selector : 'page-kml-overlay' , templateUrl : 'kml-overlay.html' , } ) export class KmlOverlayPage { map : GoogleMap ; loading : any ; constructor ( public loadingCtrl ) { } ionViewDidLoad ( ) { console . log ( 'ionViewDidLoad KmlOverlayPage' ) ; this . loadMap ( ) ; } loadMap ( ) { this . loading = this . loadingCtrl . create ( { content : 'Please wait...' } ) ; this . loading . present ( ) ; this . map = GoogleMaps . create ( 'map_canvas' ) ; this . map . addKmlOverlay ( { url : "assets/kmloverlay/polygon.kml" } ) . then ( ( kmlOverlay ) => { this . loading . dismiss ( ) ; console . log ( kmlOverlay ) ; this . map . moveCamera ( kmlOverlay . getDefaultViewport ( ) ) ; kmlOverlay . on ( GoogleMapsEvent . KML_CLICK ) . subscribe ( ( params ) => { let overlay = params [ 0 ] ; let latLng = params [ 1 ] ; console . log ( overlay , latLng ) ; } ) ; } ) ; } }