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

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

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

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

執筆者:

関連記事

Zapierを使わずRaspberry Pi 3でTogglのタイムトラッキングデータをGoogle Calendarへ同期するようにした話

どうも、こがわです。 以前にZapierを使ってGoogleカレンダーとTogglを同期!行動を可視化して自制を促進しよう!を書いたばかりなのに、もうZapierを使わないでTogglとGoogle …

no image

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

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

no image

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

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

no image

ブログに特化したCMS「Ghost」をさくらのVPSにインストールしてみた

WordPressからGhostに移行しました。 移行の主な理由として、ページ読み込みのレスポンス速度を向上させたかったのです。実際に移行した結果、定量的に見てはいないのですが体感的にかなり速くなった …

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

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

プロフィール

プロフィール

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

ポートフォリオはこちら