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

アプリ内での基本的な地図の表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google Maps APIを使って、アプリ内で基本的な地図を表示する方法について解説致します。
講師:
05:56

字幕

このレッスンでは Google Maps APIを使って アプリ内で 基本的な地図を表示する方法について 解説いたします まずは ダウンロードしてきた こちらの「show_map」 というフォルダの中に入っている こちらの「js」フォルダの中の 「index.js」ファイル こちらをエディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使いながら 今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを始めていきましょう この「index.js」ファイルですが 以前のレッスンで GitHubからダウンロードしてきた プロジェクトテンプレートファイルを 今回のレッスン用に 修正したものとなっています そして今回のレッスンで 注目していただきたいところは こちらの「receivedEvent」の 「function」の「{}」の中に入っている こちらの部分となっています こちらの部分で実際に 基本的な地図をアプリの中に 組み込むためのプログラムを書いています それでは具体的にどのように書いているか 確認していきたいと思います まず一点確認しておきたいのは こちらの「receivedEvent:function」 という部分ですね こちらの「receivedEvent」は もともとの プロジェクトテンプレートファイルに 記載されていたものですが こちらの「receivedEvent」は 端末の中でアプリが起動されて 準備が整ったときに実行される 関数となっています ですので この中に書かれている 地図を表示するためのプログラムは アプリの準備が完了した段階で 実行されるわけですね それでは実際に どのように地図を組み込んでいるか 確認していきたいと思います まずは ユーザー定義関数 「initialize」 というものを作っています そして このユーザー定義関数を定義した後に すぐに この「initialize」を 実行していますね そして この「initialize」の中では 実際に 地図を表示させるための プログラムを書いています まずは作成した地図を 格納するための変数を用意しています 「var map」という形で変数を 定義していますね そしてその次に 「初期状態の地図の中心地を設定」しています まずは「var」と書いて 「pos」という名前の変数を作っています そして初期状態でマップに表示したい地点 今回は東京を指定するような 緯度経度を書いています その緯度経度で こちらの「new google.maps.LatLng」 という命令を使って Google Maps APIで 利用できる位置情報に変換して それを この変数「pos」に代入しています そして次に 「showMap」という関数を作っています この「showMap」という関数の中では その名の通り 実際に地図を表示させる プログラムを書いてます まずは「mapOptions」 という名前の変数を作って その中に地図の設定項目を記載しています まずは「center」という項目に 先ほどの変数「pos」を入れていますね このようにすることで 表示された地図の中心点を 先ほどの東京にすることができるわけですね そして次に 「mapTypeId」という項目です こちらには 「google.maps.MapTypeId.ROADMAP」 と入れています この値を入れることで 地図の種類を 道路地図に設定することができます そして次に 「disableDefaultUI」として 「true」としています この「disableDefaultUI」を 「true」にすることによって 地図の上にデフォルトで表示されてくる マップの種類の切り替えボタンや ズームレベルの切り替えのコントローラー それを非表示にすることができます そして最後にズームレベル こちらの「zoom」ですね こちらの「zoom」レベルを 「14」に設定しています このマップの設定を作ったら 実際に この設定に基いてマップを作成します マップを作成するには こちらの部分ですね まず 先ほど作成した変数 「map」と書いて 「=new google.maps.Map」として 「()」の「;」で処理を閉じて そして この引数の中に まずは 地図を表示したい HTMLの要素を書きます ここでは 「document.getElementById("map")」 としているので 「id="map"」が付いた要素に 地図を表示させるという意味になります そして2つ目の引数 「mapOptions」ですが こちらは先ほど作成した こちらの地図の設定項目ですね この設定項目が代入された 「mapOptions」という変数を あてています こうすることによって この設定項目が活かされた 地図を作成することができるわけですね そして 最後に こちらのユーザー定義関数 「showMap」を閉じたすぐ後に こちらの「showMap」の 関数を呼び出して 実際に地図を生成している 状態となっています このようにすることで 東京を中心とした地図の表示を アプリの中で行うことができるわけです 以上でレッスンは終了です 今回はGoogle Maps APIを使って アプリ内で 基本的な地図を表示する方法について 解説いたしました 以降のレッスンでは 今回アプリ内に設置した地図の縦横サイズを 実機端末の解像度に合わせて 大きさを調整する方法について 解説いたしますので そちらも合わせてご覧ください

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宛までご連絡ください。