title: Google Maps In Ionic Tab
body: <p>I'm trying to get Google Maps working under a vanilla Ionic 4 tab. This is the error I get.</p>
  
  <pre><code>Error: Element must be under &lt;body&gt;
  at Function.push../node_modules/@ionic-native/google-maps/ngx/index.js.GoogleMaps.create (index.js:208)
  at Tab1Page.push../src/app/tab1/tab1.page.ts.Tab1Page.initMap (tab1.page.ts:24) 
  </code></pre>
  
  <p>Here is the tab HTML.</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-title&gt;
        Find A Store
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;div #map id="map_canvas" style="height:100%;"&gt;&lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>Here is the tab typescript.</p>
  
  <pre><code>import { Component, ViewChild, OnInit } from '@angular/core';
  import { Platform, NavController } from "@ionic/angular";
  import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Marker } from "@ionic-native/google-maps/ngx";
  
  @Component({
    selector: 'app-tab1',
    templateUrl: 'tab1.page.html',
    styleUrls: ['tab1.page.scss']
  })
  export class Tab1Page implements OnInit {
  
    @ViewChild('map') element;
  
    constructor(public googleMaps: GoogleMaps, public platform: Platform,
      public nav: NavController) {}
  
      async ngOnInit() {
        await this.platform.ready();
        await this.initMap()
      }
  
      initMap() {
  
        let map: GoogleMap = GoogleMaps.create(this.element.nativeElement);
  
        map.one(GoogleMapsEvent.MAP_READY).then((data: any) =&gt; {
          let coordinates: LatLng = new LatLng(36.06731743465648, -79.79521393775941);
          let position = {
            target: coordinates,
            zoom: 17
          };
          map.animateCamera(position);
  
          let markerOptions: MarkerOptions = {
            position: coordinates,
            icon: "../../assets/images/icons8-Marker-64.png",
            title: 'Greensboro, NC'
          };
          const marker = map.addMarker(markerOptions)
            .then((marker: Marker) =&gt; {
              marker.showInfoWindow();
          });
        })
      }
  }
  </code></pre>
  
  <p>Since the HTML snippet should already be under the body tag, I'm not sure how this would happen, except maybe that the snippet is rendered before the body is generated. The exception is thrown in the Google maps module in this code snippet in the map create function.</p>
  
  <pre><code>if (element instanceof HTMLElement) {
      if (!element.offsetParent) {
          throw new Error('Element must be under &lt;body&gt;');
      }
  </code></pre>
  
  <p>Any help is appreciated.</p>