import { Component } from '@angular/core' ; import { IonicPage } from 'ionic-angular' ; import { GoogleMaps , GoogleMap , ILatLng , Circle , Marker , Spherical } from '@ionic-native/google-maps' ; /**
 * Generated class for the CirclePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */ @ IonicPage ( ) @ Component ( { selector : 'page-circle' , templateUrl : 'circle.html' } ) export class CirclePage { map : GoogleMap ; constructor ( ) { } ionViewDidLoad ( ) { console . log ( 'ionViewDidLoad CirclePage' ) ; this . loadMap ( ) ; } loadMap ( ) { let center = { "lat" : 32 , "lng" : - 97 } ; let radius = 300 ; let positions = [ 0 , 90 , 180 , 270 ] . map ( ( degree ) => { return Spherical . computeOffset ( center , radius , degree ) ; } ) ; this . map = GoogleMaps . create ( 'map_canvas' , { camera : { target : positions , padding : 100 } } ) ; let marker = this . map . addMarkerSync ( { position : positions [ 0 ] , draggable : true , title : 'Drag me!' } ) ; let circle = this . map . addCircleSync ( { 'center' : center , 'radius' : radius , 'strokeColor' : '#AA00FF' , 'strokeWidth' : 5 , 'fillColor' : '#00880055' } ) ; marker . on ( 'position_changed' ) . subscribe ( ( params ) => { let newValue = < ILatLng > params [ 1 ] ; let newRadius = Spherical . computeDistanceBetween ( center , newValue ) ; circle . setRadius ( newRadius ) ; } ) ; } }