GoogleMaps API IONIC 3

<ion-header>
	<ion-navbar>
		<button ion-button menuToggle>
			<ion-icon name="menu"></ion-icon>
		</button>
		<ion-title>Home</ion-title>
	</ion-navbar>
</ion-header>

<ion-content padding>
	<h3>Ionic GoogleMaps Demo</h3>
	<p>
		This is a demo application of <b>@ionic-native/google-maps</b> plugin.
	</p>
	<div id="map_canvas">
		<button ion-button (click)="onButtonClick($event)">Demo</button>
	</div>
</ion-content>

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,
  Platform, ToastController } from 'ionic-angular';

  import {
    GoogleMaps,
    GoogleMap,
    GoogleMapsEvent,
    GoogleMapOptions,
    CameraPosition,
    MarkerOptions,
    Marker,
    MyLocation,
    GoogleMapsAnimation
  } from '@ionic-native/google-maps';

/**
 * Generated class for the MapPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

 @IonicPage()
 @Component({
   selector: 'page-map',
   templateUrl: 'map.html',
 })
 export class MapPage {
   mapReady: boolean = false;
   map: GoogleMap;

   constructor(public navCtrl: NavController, public navParams: NavParams, 
     private googleMaps: GoogleMaps, public platform: Platform, public toastCtrl: ToastController) {
     platform.ready().then(()=>{
       this.loadMap();
     });
   }

   loadMap() {
     let mapOptions: GoogleMapOptions = {
       camera: {
         target: {
           lat: 43.0741904,
           lng: -89.3809802
         },
         zoom: 18,
         tilt: 30
       }
     };

     this.map = this.googleMaps.create('map_canvas', mapOptions);
    
     // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {
      console.log('Map is ready!');
      // Now you can use all methods safely.
      this.map.addMarker({
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: {
          lat: 43.0741904,
          lng: -89.3809802
        }
      })
      .then(marker => {
        marker.on(GoogleMapsEvent.MARKER_CLICK)
        .subscribe(() => {
          alert('clicked');
        });
      });
    });
  }

  onButtonClick() {
    if (!this.mapReady) {
      this.showToast('map is not ready yet. Please try again.');
      return;
    }
    this.map.clear();

    // Get the location of you
    this.map.getMyLocation()
    .then((location: MyLocation) => {
      console.log(JSON.stringify(location, null ,2));

        // Move the map camera to the location with animation
        return this.map.animateCamera({
          target: location.latLng,
          zoom: 17,
          tilt: 30
        }).then(() => {
          // add a marker
          return this.map.addMarker({
            title: '@ionic-native/google-maps plugin!',
            snippet: 'This plugin is awesome!',
            position: location.latLng,
            animation: GoogleMapsAnimation.BOUNCE
          });
        })
      }).then((marker: Marker) => {
        // show the infoWindow
        marker.showInfoWindow();

        // If clicked it, display the alert
        marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
          this.showToast('clicked!');
        });
      });
    }

    showToast(message: string) {
      let toast = this.toastCtrl.create({
        message: message,
        duration: 2000,
        position: 'middle'
      });

      toast.present(toast);
    }



  }