import { Component } from '@angular/core' ; import { IonicPage } from 'ionic-angular' ; import { GoogleMaps , GoogleMap , GoogleMapsEvent , ILatLng , GroundOverlay } from '@ionic-native/google-maps' ; /**
 * Generated class for the GroundOverlayPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */ @ IonicPage ( ) @ Component ( { selector : 'page-ground-overlay' , templateUrl : 'ground-overlay.html' , } ) export class GroundOverlayPage { map : GoogleMap ; constructor ( ) { } ionViewDidLoad ( ) { console . log ( 'ionViewDidLoad CirclePage' ) ; this . loadMap ( ) ; } loadMap ( ) { let bounds = [ { "lat" : 40.712216 , "lng" : - 74.22655 } , { "lat" : 40.773941 , "lng" : - 74.12544 } ] ; this . map = GoogleMaps . create ( 'map_canvas' , { camera : { target : bounds } } ) ; let groundOverlay = this . map . addGroundOverlaySync ( { 'url' : 'assets/imgs/newark_nj_1922.jpg' , 'bounds' : bounds , 'opacity' : 0.5 , 'clickable' : true } ) ; groundOverlay . on ( GoogleMapsEvent . GROUND_OVERLAY_CLICK ) . subscribe ( ( ) => { groundOverlay . setImage ( 'assets/imgs/newark_nj_1922_2.jpg' ) ; } ) ; } }