PhoneGap Buildで作るGPSを使ったスマートフォン用地図アプリ

取得した緯度経度に地図を移動

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google Maps APIを使って、住所から取得した緯度経度の位置に、地図を移動させる方法について解説致します。
講師:
04:08

字幕

このレッスンではGoogleMaps APIを使って 住所から取得した緯度経度の位置に 地図を移動させる方法について 解説いたします まずはダウンロードしてきた こちらの「move_map」 というフォルダの中に入っている 「js」フォルダの中の「index.js」ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう まずは前回までのレッスンの おさらいからしていきたいと思います 前回までのレッスンで こちらのhtmlの中の「form」タグに対して サブミットイベントを登録してそして そのサブミットイベントの中で 入力された住所を GoogleMaps APIの ジオコーディング機能に リクエストを投げてそして結果として その住所から変換された 緯度経度の値を受け取って それぞれの変数に代入そして その緯度経度のデータを基にして GoogleMaps APIでも利用できるような 形に変換したものを こちらの変数「newLatLng」に代入するところまで 実装してきましたね 今回はこの変数「newLatLng」を利用して 実際にアプリの中の地図の表示を この緯度経度を中心とした その周辺の地図を表示させるように してみたいと思います 今回注目していただきたい部分は こちらの部分となります それでは具体的にどのように実装しているか 確認していきたいと思います まずこちらの一行目 こちらは「map.setZoom(16);」と書いています このようにすることでアプリの中で表示している 地図のズームレベルを拡大 要するにズームアップしているような状態に することができます そしてこちらの二行目 こちらの二行目では「map.setCenter();」 そしてこのカッコの中の引数に先ほどの変数 「newLatLng」を入れておきます このようにすることでアプリの中で 表示している地図の中心点を こちらの住所から変換された緯度経度に セットすることができて その周辺の地図を表示することができます 以上で地図検索機能の 実装は完了となります それではこの状態で 先程ダウンロードしてきたこちらのファイルの 「www」というフォルダをzip圧縮して PhoneGap Buildの方に アップロードしてみたいと思います PhoneGap Buildで 更新アップロードするには こちらの「コードを更新」というボタンを押して こちらの「ファイルを選択」ボタンを押して 先ほどのzipファイルを選択して こちらのアップロードをクリックします そして対象となる端末のビルドが完了したら 手元の実機端末から こちらのマップアプリを起動してみましょう ハイドレーション機能をオンにしている場合は 自動的に更新されてきますので そのまま起動していただいて大丈夫です もしハイドレーション機能を オンにしていない場合は 再度こちらのQRコードを 端末から読み取ってこちらのアプリを 実機端末にインストールしてください そしてそのアプリを起動したものが こちらになります このように起動した段階では 現在位置のところにピンが立っていて その周辺の地図が表示されている 状態になっています それではこちらの検索ボックスの方に 検索したい地名を入力したいと思います そうですね 例えばここでは 東京駅と入れてみましょうか そしてこちらの検索ボタンをタップすると このように東京駅の周辺の地図が 表示されてきました このように動作すればきちんとアプリの実装が 完了できているといった状態になります 以上でレッスンは終了です 今回はGoogleMaps APIを使って 住所から取得した緯度経度の位置に 地図を移動させる方法について 解説いたしました 以上のレッスンをもちまして 「PhoneGap Build」を使った GPS機能付きの地図アプリの作成は 完了となります このようにPhoneGap Buildを習得すれば 新たに専用のプログラミング言語を 習得しなくても 簡単に今回のようなGPS機能を持って 地図アプリが 作れるようになりますので ぜひ皆さんもご自身で オリジナルアプリの制作に チャレンジしてみてください

PhoneGap Buildで作るGPSを使ったスマートフォン用地図アプリ

PhoneGap BuildとはHTMLやCSS、JavaScriptなどを使って制作したファイルをモバイルアプリに変換してくれるWebサービスです。このコースではPhoneGap Buildを使いながらGPS機能を用いた地図アプリの作成する方法について学習します。PhoneGap Buildの事前準備や地図機能の実装方法などについて詳しく解説します。

1時間15分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年03月11日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。