import { Component } from '@angular/core' ; import { ToastController } from 'ionic-angular' ; import { GoogleMaps , GoogleMap , GoogleMapsEvent , Marker , GoogleMapsAnimation , MyLocation } from '@ionic-native/google-maps' ; @ Component ( { selector : 'page-home' , templateUrl : 'home.html' } ) export class HomePage { map : GoogleMap ; constructor ( public toastCtrl ) { } ionViewDidLoad ( ) { this . loadMap ( ) ; } loadMap ( ) { this . map = GoogleMaps . create ( 'map_canvas' , { camera : { target : { lat : 43.0741704 , lng : - 89.3809802 } , zoom : 18 , tilt : 30 } } ) ; } onButtonClick ( ) { this . map . clear ( ) ; this . map . getMyLocation ( ) . then ( ( location ) => { console . log ( JSON . stringify ( location , null , 2 ) ) ; this . map . animateCamera ( { target : location . latLng , zoom : 17 , tilt : 30 } ) . then ( ( ) => { let marker = this . map . addMarkerSync ( { title : '@ionic-native/google-maps plugin!' , snippet : 'This plugin is awesome!' , position : location . latLng , animation : GoogleMapsAnimation . BOUNCE } ) ; marker . showInfoWindow ( ) ; marker . on ( GoogleMapsEvent . MARKER_CLICK ) . subscribe ( ( ) => { this . showToast ( 'clicked!' ) ; } ) ; } ) ; } ) ; } showToast ( message ) { let toast = this . toastCtrl . create ( { message : message , duration : 2000 , position : 'middle' } ) ; toast . present ( toast ) ; } }