capacitor-googlemaps-native Android component

android-gmaps.component.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Android
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Android</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="map" #map></div>

</ion-content>

android-gmaps.component.scss

#map {
    margin: 2em 1em;
    height: 250px;
    border: 1px solid black;
  }

android-gmaps.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Plugins } from '@capacitor/core';

const { CapacitorGoogleMaps, Device } = Plugins;

@Component({
  selector: 'app-android-gmaps',
  templateUrl: 'android-gmaps.page.html',
  styleUrls: ['android-gmaps.page.scss']
})
export class AndroidGmapsPage {

  @ViewChild('map', {static: false}) mapView: ElementRef;
  capacitorGoogleMapsPlugin = CapacitorGoogleMaps;

  constructor() {
  }

  async ngOnInit() {
  }

  async ionViewDidEnter() {
      const boundingRect = this.mapView.nativeElement.getBoundingClientRect() as DOMRect;

      this.capacitorGoogleMapsPlugin.create({
          width: Math.round(boundingRect.width),
          height: Math.round(boundingRect.height),
          x: Math.round(boundingRect.x),
          y: Math.round(boundingRect.y),
          latitude: -33.86,
          longitude: 151.20,
          zoom: 12,
      });

      this.capacitorGoogleMapsPlugin.addListener('onMapReady', async () => {
          this.capacitorGoogleMapsPlugin.addMarker({
              latitude: -33.86,
              longitude: 151.20,
              title: 'Custom Title',
              snippet: 'Custom Snippet',
          });

          this.capacitorGoogleMapsPlugin.setMapType({
              type: 'normal',
          });
      });
  }

  ionViewDidLeave() {
      this.capacitorGoogleMapsPlugin.close();
  }
}