Google Maps In Ionic Tab

问题

I'm trying to get Google Maps working under a vanilla Ionic 4 tab. This is the error I get.

Error: Element must be under <body>
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)

Here is the tab HTML.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Find A Store
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div #map id="map_canvas" style="height:100%;"></div>
</ion-content>

Here is the tab typescript.

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) => {
        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) => {
            marker.showInfoWindow();
        });
      })
    }
}

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.

if (element instanceof HTMLElement) {
    if (!element.offsetParent) {
        throw new Error('Element must be under <body>');
    }

Any help is appreciated.

回答1:

To Embed native Google Maps views into your app, There are 2 solutions:

1- Using Element DIV ID:

import { Component, ViewChild, OnInit, ElementRef } 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 {
  map: GoogleMap;

  constructor(public googleMaps: GoogleMaps, public platform: Platform,
    public nav: NavController) { }

  async ngOnInit() {
    await this.platform.ready();
    await this.initMap();
  }

  initMap() {
    this.map = GoogleMaps.create("map_canvas");

    this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
      let coordinates: LatLng = new LatLng(36.06731743465648, -79.79521393775941);
      let position = {
        target: coordinates,
        zoom: 17
      };
    this.map.animateCamera(position);
      let markerOptions: MarkerOptions = {
        position: coordinates,
        //icon: "../../assets/images/icons8-Marker-64.png",
        title: 'Greensboro, NC'
      };
      const marker = this.map.addMarker(markerOptions)
        .then((marker: Marker) => {
          marker.showInfoWindow();
        });
    })
  }
}

2- Using @ViewChild:

import { Component, ViewChild, OnInit, ElementRef } 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 {
  @ViewChild('map') element: ElementRef;
  map: GoogleMap;

  constructor(public googleMaps: GoogleMaps, public platform: Platform,
    public nav: NavController) { }

  ionViewDidEnter() {
    console.log("call ionViewDidLoad");
    this.platform.ready().then(() => {
      this.initMap();
    });
  }


  initMap() {
    this.map = GoogleMaps.create(this.element.nativeElement);

    this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
      let coordinates: LatLng = new LatLng(36.06731743465648, -79.79521393775941);
      let position = {
        target: coordinates,
        zoom: 17
      };
    this.map.animateCamera(position);
      let markerOptions: MarkerOptions = {
        position: coordinates,
        //icon: "../../assets/images/icons8-Marker-64.png",
        title: 'Greensboro, NC'
      };
      const marker = this.map.addMarker(markerOptions)
        .then((marker: Marker) => {
          marker.showInfoWindow();
        });
    })
  }
}

Note: You cannot call this.initMap() in ngOnInit() function, because HTML DOM is not rendered commpletely. So in Ionic 4, you need to call it in ionViewDidEnter() instead. For more information, Please read Ionic 4 and the Lifecycle Hooks in Angular

Screenshot

You find my source code here: ionic4-tabs-map

来源：https://stackoverflow.com/questions/54639335/google-maps-in-ionic-tab

标签

javascript

google-maps-api-3

ionic4