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上に表示されているかと思います。

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

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

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

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

RESTfulなURL設計について簡単にまとめて見ました

どうも、こがわです。 RESTfulなURL設計について、以前に学習したものを復習がてらまとめて見たいと思います。 Webサービスを開発する際、URL設計はとても大事です。 サービスを構成するシステム …

Ionic3でハイブリッドアプリ開発時に遭遇した問題と問題に対する対処法の共有

この記事はIonic Advent Calendar 2017の12/22のエントリーです。 アプリを開発するにあたり遭遇した問題を共有しようと思います。 いつか同じ問題に遭遇した時、このページで解決 …

no image

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

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

no image

Digest認証設定方法 – セキュアなユーザー認証を用いて盗聴/改竄を防ごう!

どうも、こがわです。お題の通りなのですが、今回は、Digest認証を用いて認証を突破しない限りページの閲覧ができないようにする方法を説明します。 ユーザー認証は、管理画面などによく用いられていますね。 …

no image

MacBookPro13.3インチ – おすすめ保護用アクセサリ

どうも、こがわです。この度MacBookPro13.3インチを購入しました。 新品ということもあり、やはり傷はつけたくないものです。できるだけ中古で高く売れるようにという思いもあります。むしろこっちが …

プロフィール

プロフィール

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

ホームページはこちら