Googleマップを使って現在地を地図上に表示 5.2

5.2
Google マップを使って
現在地を地図上に表示
Section
Geolocation APIを使えば、現在地を取得することはできます。ただし、実際には現在地を取得し
ただけでは、どこにいるのかが分かりません。多くの場合、地図サービスと組み合わせることになります。
このセクションでは、Google マップを使って現在地を地図上に表示します（＊1）。
5.2.1 Google マップの表示
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Google マップを表示するには、あらかじめ div 要素で地図を表示する領域を用意しておきます。表
示する範囲はスタイルシートで指定しておきます。CSSファイルが別にある場合には、そのファイル内に
地図を表示するdiv 要素のサイズを指定してもかまいません。読み込み速度／表示速度を少しでも速く
したい場合にはHTMLファイル内にCSSを埋め込む方法もあります。特にAndroidでは、ファイルが
別々になっていると読み込み速度が低下し結果的に地図の表示が遅くなってしまうことがあります。
例えば Google マップを横幅 320ピクセル、縦幅 240ピクセルで表示したい場合は、以下のように書き
<div id="gmap" style="width:320px;height:240px;"></div>
次にgoogle.maps.Map()を使ってマップのインスタンス（マップオブジェクト）を作成します。最初のパ
ラメータには、地図を表示するための div 要素を指定します。2 番目のパラメータには各種オプションを
設定します。Google マップで指定することができるオプションは多数ありますが、その中でズームレベル
と中心の緯度経度、地図の種類の 3 つは必ず指定しなければなりません。
＊1
Google Maps APIを利用した際、アクセス数によっては有料になる場合があります。Google Maps API 以外の地図サービス
を利用する方法もあります。次のセクションではYahooマップを使い現在地を表示する方法について解説しています。
119
5.2
Google マップを使って現在地を地図上に表示
ます。
Chapter 5
下のようにライブラリファイルを読み込ませます。これでGoogle Maps APIを利用することができます。
位置情報を取得する
［HTML5 Geolocation］
まず、Google マップを表示する方法について説明します。Google マップは、script 要素を使って以
表 5.2.1
地図のオプション
zoom
ズームレベルを整数値で指定。1 が地球全図。値が大きくなるほどズームイン
center
地図の中心の緯度経度。google.maps.LatLng() を使って指定
地図の種類。以下の 4 種類を指定
mapTypeId
google.maps.MapTypeId.ROADMAP
通常の地図
google.maps.MapTypeId.SATELLITE
航空写真
google.maps.MapTypeId.TERRAIN
地形
google.maps.MapTypeId.HYBRID
航空写真＋道路地図
実際に富士山を中心にして地図を表示するプログラムがサンプル 5.2.1 になります。div 要素に地図
を横幅 320px、縦幅 240pxで表示します。なお、縦幅を100% のようにパーセンテージで指定すると、
地図が表示されないことがあります（＊2）。
JavaScriptではnew google.maps.Map()としてマップオブジェクトのインスタンスを生成し、必要なパ
ラメータを設定します。表示オプションはズームレベルを8，
中心の緯度経度はLatLngオブジェクトを使っ
て富士山の場所を指定します。地図の種類は通常の地図に設定します。
●サンプル 5.2.1 ●
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "initial-scale=1, user-scalable=no">
<title>Google マップを表示 </title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.js"></script>
<script src="js/geo.js"></script>
</head>
<body>
<div id="gmap" style="width:320px;height:240px;"></div>
</body>
</html>
●サンプル 5.2.1 JavaScript(geo.js) ●
$(function(){
var map = new google.maps.Map(
document.getElementById("gmap"),{
zoom : 8,
center : new google.maps.LatLng(35.328080915397635, 138.72854948043823),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
});
120
図 5.2.1
Google マップが表示される。地図内を指でドラッグすると表示範囲を変えることができる。
5.2.2 現在地とマーカーの表示
のインスタンスを生成します（マーカーは複数作成できます）。マーカーを生成する際には暫定の位置と
表示先のマップオブジェクトを指定します。例えば以下のコードでは、myMapオブジェクトに緯度 30、
経度 140 の座標にマーカーを表示します。
marker = new google.maps.Marker({
position: new google.maps.LatLng(30, 140),
map: myMap
});
このマーカーの位置は暫定的なものですので、現在地の緯度経度が取得できたらマーカーの位置を
ドを使います。パラメータには、緯度経度を示す LatLngオブジェクトを指定します。これでマーカーが
指定した位置に表示されます。
以下の例では変数 lat、lonに入っている緯度、経度の位置にマーカーを設定します。
var pos = new google.maps.LatLng(lat, lon);
marker.setPosition(pos);
＊2
要素の高さが決定していない場合表示されません。高さに合わせてサイズを決定する方法は次のセクションで説明します。
121
5.2
Google マップを使って現在地を地図上に表示
再設定する必要があります。
マーカーの位置を設定するには、
マーカーオブジェクトの setPosition()メソッ
Chapter 5
ためにマーカーを地図上に表示します。Google マップではnew google.maps.Marker()としてマーカー
位置情報を取得する
［HTML5 Geolocation］
地図の中心が現在地ですが、これでは分かりやすいとは言えません。そこで、現在地を明確にする
●現在地表示とマーカー表示処理を組み込む
jQuery Mobileに現在地表示と地図上にマーカーを表示する処理を組み込んだものがサンプル
5.2.2 になります。地図を表示する際にはページが読み込まれた後ではなく、リスト項目（現在地を地図
に表示）をタップした後に処理するようにしています。これは以前の章でも解説しましたが pageshowイ
ベントを利用します。この pageshowイベントが発生したら、地図をページ上に表示するようにします。
$("#map").bind("pageshow", function(evt){ 〜 });
●サンプル 5.2.2 ●
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "initial-scale=1, user-scalable=no">
<title>- ローカル地図屋 -</title>
<link rel="stylesheet" href="css/jquery.mobile.css">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.js"></script>
<script src="js/geo.js"></script>
<script src="js/jquery.mobile.js"></script>
</head>
<body>

<div data-role="page">
<div data-role="header">
<h1> 現在地の情報 </h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#position"> 現在地の情報を確認 </a></li>
<li><a href="#map"> 現在地を地図に表示 </a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-id="foot">
<p>- ローカル地図屋 -</p>
</div>
</div>

<div data-role="page" id="position" data-add-back-btn="true" data-back-btn-text=" 戻る ">
<div data-role="header">
<h1> 現在地の情報 </h1>
</div>
<div data-role="content">
<p id="geoData"> 現在地の情報を取得中 ...</p>
</div>
<div data-role="footer" data-position="fixed" data-id="foot">
122

Download Report