Adding Google Maps SDK Cordova Plugin in Ionic 4

Currently Google Map is applied in the application a lot so I will introduce you how to Adding Google Maps SDK Cordova Plugin in Ionic 4, to do a problem on the you must follow the steps below
Create a new Application

ionic start MapsDemo blank --type =angular

cd MapsDemo

Visit website get key Api Map :  How to Get Google API Key?

$ npm install @ionic-native/core@beta @ionic-native/google-maps@beta

$ ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_API_KEY_HERE" --variable API_KEY_FOR_IOS="YOUR_API_KEY_HERE"

 app.component.ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Environment } from '@ionic-native/google-maps';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {

      Environment.setEnv({
        // api key for server
        'API_KEY_FOR_BROWSER_RELEASE': 'YOUR_API_KEY_HERE',

        // api key for local development
        'API_KEY_FOR_BROWSER_DEBUG': 'YOUR_API_KEY_HERE'
      });

      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}

In home.page.ts

import { Component, OnInit } from '@angular/core';
import {
  ToastController,
  Platform
} from '@ionic/angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  Marker,
  GoogleMapsAnimation,
  MyLocation
} from '@ionic-native/google-maps';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  map: GoogleMap;
  address:string;
  constructor(
    public toastCtrl: ToastController,
    private platform: Platform
    ) { }
  ngOnInit() {
    // Since ngOnInit() is executed before `deviceready` event,
    // you have to wait the event.
    this.platform.ready();
    this.loadMap();
  }
  loadMap() {
    this.map = GoogleMaps.create('map_canvas', {
      // camera: {
      //   target: {
      //     lat: 43.0741704,
      //     lng: -89.3809802
      //   },
      //   zoom: 18,
      //   tilt: 30
      // }
    });
    this.goToMyLocation();
  }

  goToMyLocation(){
    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
      this.map.animateCamera({
        target: location.latLng,
        zoom: 17,
        duration: 5000
      });
      //add a marker
      let marker: Marker = this.map.addMarkerSync({
        title: '@ionic-native/google-maps plugin!',
        snippet: 'This plugin is awesome!',
        position: location.latLng,
        animation: GoogleMapsAnimation.BOUNCE
      });
      //show the infoWindow
      marker.showInfoWindow();
      //If clicked it, display the alert
      marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
        this.showToast('clicked!');
      });
      this.map.on(GoogleMapsEvent.MAP_READY).subscribe(
        (data) => {
            console.log("Click MAP",data);
        }
      );
    })
    .catch(err => {
      //this.loading.dismiss();
      this.showToast(err.error_message);
    });
  }
  async showToast(message: string) {
    let toast = await this.toastCtrl.create({
      message: message,
      duration: 2000,
      position: 'middle'
    });
    toast.present();
  }
}

in home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Google SDK Maps
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <div id="map_canvas"></div>
</ion-content>

in home.page.scss

#map_canvas {
    width: 100%;
    height: 80vh;
  }

check app

$ ionic cordova run browser

the success: