Kogawa

学習した内容や自身の考えを記録していくブログです。

テクノロジー

Ionic3でGoogleMaps表示とGoogle PlacesAPIを用いたAutocomplete機能を持つアプリを作る方法その2: Google PlacesAPIを用いてAutocompleteを実装する。

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

どうも、こがわです。

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

Google Places APIを使用し、Autocomplete機能を実装していきます。

本来ならAutocompleteで取得した場所をクリックするとその場所をGoogle Maps上に表示するというのが一般の流れですが、今回はそこまでせず、検索できるところまでの紹介となります。

Google Places APIの導入

index.html の body タグ内に以下の記述を追加。

YOUR API KEY となっている部分は公式ドキュメントにしたがって取得したAPIキーを記述します。

Autocomplete用のページを作成

Autocomplete用のページを作成します。

ちなみに今回はAutocompleteの検索部分をモーダルで表示します。

作成されたautocompleteのファイルをそれぞれ以下のように変更します。

autocomplete.html

autocomplete.ts

流れを解説すると、html側で ionInput で入力をハンドリングし、1文字入力するたびに updateSearch() メソッドを呼び出します。

updateSearch()メソッド内では、Google Places APIの getPlacePredictions メソッドを呼び出し、入力されている文字列で検索を実施します。そして、返ってきた検索結果を autocompleteItems に追加し、html側で展開しています。

この時 Angular の NgZone を使用しないと、取得した場所情報が即座にhtmlに展開されないので注意が必要です。

ホーム画面からAutocomplete用のページをモーダルで表示する

最後にホーム画面よりAutocomplete用のページをモーダルで表示する実装を行います。

home.html に以下の行を追加します。

次に home.ts へ以下の行を追加/変更します。

流れとして、html側でボタンをタップしたら showAddressModal メソッドが呼ばれオートコンプリートのページがモーダルとして表示されます。

この時、 onDidDismiss でモーダルを閉じた際にデータを受け取る処理を定義しています。これにて autocomplete.tsで定義された chooseItem によりオートコンプリートで表示されているアイテムをクリックするとモーダルが閉じ、クリックしたアイテムの情報がホーム画面へ渡されるようになります。

最後に

これにて2回に渡りお伝えした「Ionic3でGoogleMaps表示とGoogle PlacesAPIを用いたAutocomplete機能を持つアプリを作る方法」を終わりたいと思います。

本来ならホーム画面に渡された場所情報をGoogle Maps上に表示し、ルートを表示するのか、マーカーをつけるのか等の処理を実装していくと思うのですが、今回はそこまで実装しなかったのでこれにて終わりとします。

最近のバージョンのIonicだと $ ionic g page autocomplete で作られるページが最初から遅延読み込みに対応していたりと実装も起動も早くなるよう進化を遂げていますね。

実際、今回の機能自体も少量のコードで実装出来てしまいますし、ハイブリッドアプリ開発はこれからどんどん発展していくと思います。

本記事を機にハイブリッドアプリ開発をしたことない方は一度試してみるのも良いかもしれないですね。ただこの記事を読んでる方はおそらく既に触られている方だと思いますけども。。

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

執筆者:


comment

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

関連記事

no image

OS X(Macbook or iMac or Macmini)の待ち受け画面をすっきりさせてかっこよくカスタマイズしちゃおう!

どうも!こがわです。 今日はOS Xの待ち受け画面をすっきりさせて、かっこ良くする方法をお伝えします。 最終的に下記のような画面になります! そうです。壁紙以外一切表示されません!どうです?シンプルで …

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

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

no image

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

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

no image

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

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

今更ながらRubyでTwitterへ自動ツイートできるプラグラムを作ってみたので、2017年12月現在手順通りに行うだけで同じように作れる情報を共有。

どうも、こがわです。 今更ながらRubyでTwitterへ自動ツイートできるプラグラムを書いてみたので共有します。 INDEX環境情報開発事前準備Twitterでアプリ登録Twitter APIをコー …

プロフィール

プロフィール

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

ホームページはこちら