Ionic3でNative pluginのgoogle-maps使用時、公式ドキュメント通りに実装しても地図が表示されない問題を修正

公式ドキュメントにしたがって実装しても地図が表示されない問題が起きました。

cordova-plugin-googlemaps自体のバージョンが2.1.1にバージョンが上がっている関係なのでしょうか？リリースノートを見ていないので何とも言えないですね。(Ionicの公式ドキュメント上では2.0.0想定のようです。)

以下に対応した内容を公式ドキュメントとの差異のみで記述しておきます。

前提

作業環境:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0
cordova (Cordova CLI) : 7.1.0
@ionic/app-scripts : 3.1.5
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2
Node  : v8.9.1
npm   : 5.5.1
OS    : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b

対応内容

-1. Platform プラグインをインポート。

home.ts

import { Platform } from 'ionic-angular';

-2. コンストラクターに platform の記述を追加。そのため ionViewDidLoad から loadMap() メソッドを削除しておく。

home.ts

  constructor(public platform: Platform) {
    platform.ready().then(()=>{
      this.loadMap();
    })
  }

-3. loadMap() メソッドを以下のように変更。(このメソッドのみ変更差分だけでなく、全文記述しました。手抜きです。すみません。)

  loadMap() {
    let element: HTMLElement = document.getElementById('map_canvas');
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };
    let map: GoogleMap = GoogleMaps.create(element, mapOptions);

    // Wait the MAP_READY before using any methods.
    map.one(GoogleMapsEvent.MAP_READY)
    .then(() => {
      console.log('Map is ready!');

      // Now you can use all methods safely.
      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');
        });
      });
    });
  }

以上により、　 $ ionic cordova run android --devise --prod 等で実行すると地図がしっかりと表示されます。ネイティブプラグインなので、例にもれずブラウザでの動作確認は出来ませんのでご注意を。

参考:

補足

公式ドキュメントにhtml側の記述が記載されていませんが、以下の通り記述することで問題なく表示されます。

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