Kogawa

テクノロジーに少し偏る雑記ブログ

Ionic3でGoogleMaps表示とGoogle PlacesAPIを用いたAutocomplete機能を持つアプリを作る方法その1: GoogleMapsで現在地をマーカーで表示する。

投稿日:2017年12月26日 更新日:

どうも、こがわです。

とあることをきっかけにGoogle Mapsをハイブリッドアプリで使う機会が出来たので、得た知見を共有したいと思います。

例にもれず使用したフレームワークはIonicです。

ちなみに今回作成するアプリは下記のようなものとなります。

現在地をGoogle Maps上にマーカーで表示し、検索にてGoogle Places APIを使用することでオートコンプリート機能を実現しています。Google MapsはIonicのネイティブプラグインがあるのですが、Google Places APIはプラグインがないため直接APIを叩く流れになります。

開発環境

以下の環境にて作成していきます。

 

アプリ作成

以下コマンドにてアプリをまず作成します。
ionic start で ? What starter would you like to use: と聞かれたら blank と指定し、その他は全て n を選択します。

IonicネイティブプラグインであるGoogle Mapsを導入

以下のコマンドを使用し導入するのですが、 YOUR_ANDROID_API_KEY_IS_HERE と YOUR_IOS_API_KEY_IS_HERE の部分はそれぞれiOSのAPIキー取得方法AndroidのAPIキー取得方法を参考に取得したAPIキーをそれぞれ記述してください。

app.module.ts にて以下の行を追加

home.ts にて以下の行を追加。

これにてGoogle Mapsプラグインを使用する準備が出来ました。

Google Mapsに現在地を表示する

home.html を以下のように変更します。

id="map_canvas" の部分をクラスから指定してGoogle Mapsを表示する要素とします。 style="height: 100%;" がないと画面いっぱいに表示されるのでお好みで付け替えしてみてください。

次に処理の部分です。 home.ts を以下のようにします。

順を追って解説すると、まず Platform モジュールを追加し、Cordovaプラグインの実行準備が出来たタイミングをハンドリングします。

準備が出来てない段階で this.loadMap(); を読んでも初期化が出来ませんのでご注意ください。

次に loadMap() メソッドの中身ですが、生のJavaScriptでhtml要素を指定しています。

なぜ公式ドキュメントthis.googleMaps.create('map_canvas', mapOptions); のやり方でhtml要素を指定しなかったかというと、単純に動作しなかったためです。色々調べていき、出来なそうだという判断になったのでこういった形になりました。原因はしっかりと掴めていないのですが、cordovaプラグインのバージョンアップデートが怪しいです。

GoogleMaps.create(element); の部分も同様で this.googleMaps.create を使用しなかった理由は、 create の呼び出し方法がインスタンスからではなくクラスから直接指定しろとエラーが出てきたためです。なかなか公式ドキュメント通りにはいきませんね。。

さらに、本来なら create メソッドの第二引数で mapOptions を指定し初期表示場所を設定するのですが、今回は現在値を取得したかったため GoogleMapsEvent.MAP_READY が true になってから getMyLocation にて現在地を取得し、表示場所を指定して map.moveCamera(mapOptions); にて実際に表示場所を表示する流れとなっています。

Google Mapsプラグインにて扱える情報を操作したい場合は、 GoogleMapsEvent.MAP_READY が true になってからでないと操作出来ないので注意が必要です。

あとの部分は公式ドキュメントに習い、 Location を設定して addMarker をしております。

最後に

これにて、Google Maps上に現在地をマーカーで表示する処理が実装出来ました。

を実行し、シミュレーターで表示を確認すると現在地がGoogle Maps上に表示されているかと思います。

出来ていなかったらコメントください。

次回は、オートコンプリートの実装方法を紹介します。

-テクノロジー
-, , , ,

執筆者:

関連記事

no image

Mac OS XでPDFに電子印鑑(画像)を無料で貼り付ける方法を紹介

MacでPDFに電子印鑑(画像)を貼り付ける方法をご紹介します。 とある事情で、PDFに電子印鑑を押さなければならなくなりました。 プレビュー.appでできるだろうとたかをくくったところ、出来ず、あれ …

RubyのProcクラスについての学習メモ

学習のためProcクラスについて学んだことをメモしておきます。 INDEXProcクラスとはProcを作る方法ラムダ式ブロックをProcオブジェクトとして受け取る Procクラスとは ブロックをコンテ …

no image

macOS High Sierraに致命的なバグが発見された!パスワードなしでログイン可能!!対策方法をご紹介。

macOS High Sierraに誰でも管理者としてログイン出来てしまう致命的なバグが見つかりました。 下記記事からの抜粋ですが、ユーザー認証入力時、ユーザーネームをrootでパスワードを空にして入 …

さくらのVPS(CentOS7)にJIRA(オンプレ)をインストールしてみました。

どうも、こがわです。 突然ですが、プライベートでタスク管理ツール使ってますか? 会社では使ってるけど、能動的にプライベートで使ってる人は多くないかもしれません。 タスク管理ツール、いいですよ。 少なく …

no image

macOS High SierraでGarageBand関連ファイルに取られている容量を解放する方法

突然ですが、MacBook Proの空き容量問題ありませんか? 僕はあります。 下記画像をご覧頂いて分かる通り、10GBしか空き容量がありません。 これではiPhoneで撮影した約30分の4K動画を入 …

プロフィール

プロフィール

地元青森でITエンジニアとしてフリーランスで活動中。フルリモートで生活費を稼ぐ傍、作りたいアプリを黙々と製作中。

ポートフォリオはこちら