[初回公開] 2008年05月28日
スマホに搭載されている GPS で取得できる緯度経度を示す位置情報は HTML と JavaScript を利用することでウェブサイト上でも簡単に取得することができ、取得した緯度経度の情報と無料で利用できる Google Map と Mapbox といった地図サービスと連携して現在地を地図に表示する方法を紹介する。
このページの目次
１．スマホの GPS センサとは
スマホの GPS センサとは、人工衛星からの電波を利用して地球上の位置を測定するためのセンサーである。
24 時間誰でも場所を問わず利用可能で、一般的にはカーナビの利用で普及したものだが最近ではスマホやタブレットに標準搭載されており、地図や位置情報ゲームに利用されている。
GPS センサで測定した位置情報は緯度経度の情報として数値化して表される。
位置情報の取得には人工衛星を利用することから回りの建物の高さの状況によっては 10m 前後の誤差を生じることがあり、曇りや雨の日など天候状態によっても左右される。
また、電波が届かない屋内では正確に位置を取得することができないものの、スマホの場合は携帯電話の通話や通信で利用する基地局や Wi-Fi の電波を利用してある程度の位置を取得することが可能である。
２．GPS を利用した機能やサービス
GPS で取得した位置情報を利用した機能やサービスとしては、カーナビに代表されるように地図と連携して現在地を示したり、目的地までのルートを案内するものが多い。
最近ではスマホのカメラアプリや、デジタルカメラで撮影した写真の一枚一枚に位置情報を埋め込む機能も存在している。
インターネット上のサービスとしては、リアルタイムに現在位置が取得できることから、近辺の天気予報や店舗案内など情報提供サービスとして利用されることも増えてきている。
また、ランドマークや公共施設を利用した位置情報ゲームといったエンタメ系でも利用されている。
３．スマホの GPS を使って地図サービスと連携する方法
スマホやタブレットに搭載されている GPS を利用して位置情報を取得するためには、高度なプログラムを用いたアプリを開発しなくても、個人レベルで学習できる HTML と JavaScript を利用したウェブサイト作成の技術でも簡単に行うことができる。
下記ではウェブサイトで位置情報を取得し、そこで得た緯度経度を Google Map や Mapbox といった地図サービスと連携して現在地の地図を表示するサンプルを紹介する。
3-1．スマホの GPS を HTML に表示する
スマホの GPS を利用して位置情報を取得し、その結果をウェブサイト上に表示するスクリプトは次の通りである。
下記は HTML の body タグ内のみを抜粋しており、位置情報の取得には JavaScript の関数である navigator.geolocation を利用する。
<body>
<p id="lng"></p>
<p id="lat"></p>
<script>
// 現在位置を取得
navigator.geolocation
.getCurrentPosition( success, error, options );
var options = {
enableHighAccuracy: true,
timeout: 1000,
maximumAge: 0
};
// 位置取得の成功時
function success( position ) {
var crd = position.coords;
defLng = crd.longitude;
defLat = crd.latitude;
document.getElementById("lat").textContent = "緯度 : " + defLng;
document.getElementById("lng").textContent = "経度 : " + defLat;
};
</script>
</body>
getCurrentPosition が実際に位置情報を取得する関数となり、オプション値で詳細な設定を行っている。
オプションで指定している enableHighAccuracy は GPS の精度を高めるため true にしている。
timeout とは端末が位置を返すまで待機する最大時間をミリ秒単位で表している。
また、maximumAge は過去に位置情報を取得した端末内のキャッシュを利用するかを指定しており、0 にすることで常に最新の情報を取得するようになる。
実際にスマホで位置情報を取得するためには、上記のコードを記載したテキストファイルを拡張子 .html として保存し、ウェブサーバに設置する。
その後、スマホのブラウザでアクセスすると下図のように位置情報の取得許可を問うポップアップが表示される。
今回のサンプルコードは取得した位置情報をブラウザ内に表示するようにしているため、ポップアップ内の「許可」をタップすると下図のように緯度経度が数値として表示されるのが確認できる。
3-2．Google Map に取得した位置情報を渡す
前述のサンプルコードではウェブサイトにアクセスすると緯度経度が表示されるサンプルを用意したが、次はこの緯度経度を地図サービスの Google Map に応用する。
スマホの GPS で取得した位置情報は現在地となるため、地図の中心に表示されるとともにマーカーが立つようにしたサンプルコードが下記となる。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={API キー}&
sensor=false"></script>
<script type="text/javascript">
function load() {
var latlng = new google.maps.LatLng( defLat, defLng );
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( document.getElementById( "map" ), myOptions );
var iconFlag_1 = new google.maps.Marker({
position: new google.maps.LatLng( defLat, defLng ),
map: map
});
}
</script>
<div id="map" style="width:480px; height:520px"></div>
まず、Google Map をウェブサイト上で利用するためには Google Map の API キーが必要になるため、事前に Google のサイトでキーを取得してから 1 行目で指定する必要がある。
読み込んだ Google Map は map と命名した ID を利用しているため、同じく id = map と設定した div タグに描画させている。
次に前述のウェブサイトに表示した際に緯度を変数「defLng」、経度を変数「defLat」に入れたので、その値を Google Map のオプション値「center」に指定することで、地図の中心が GPS で取得した位置になる。
実際にスマホで位置情報を取得して Google Map と連携させたサンプルが上図となる。
オプション「center」だけでは地図の中心が現在地になるだけだが、実際にどこにいるか示すためには Google Map の関数である「Marker」に同じく緯度経度の情報となる defLat と defLng を渡すことで現在にマーカーが立つ。
3-3．Mapbox に取得した位置情報を渡す
全項では取得した緯度経度を Google Map に連携したが、次は無償で利用できる地図サービスの Mapbox で画面中心を現在地にし、マーカーを立てるサンプルコードが次の通りである。
<div id="map"></div>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<script>
mapboxgl.accessToken = '{Mapbox のトークンキー}';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v10',
center: [defLng, defLat],
zoom: 16
});
map.on('load', function() {
map.setLayoutProperty('country-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('road-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('state-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('settlement-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('settlement-subdivision-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('airport-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('poi-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('water-point-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('water-line-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('natural-point-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('natural-line-label', 'text-field', ['get', 'name_ja']);
map.setLayoutProperty('waterway-label', 'text-field', ['get', 'name_ja']);
map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
});
const marker1 = new mapboxgl.Marker()
.setLngLat( [defLng, defLat] )
.addTo( map );
</script>
まず、Mapbox をウェブサイト上で利用するためには Mapbox の API キーが必要になるため、変数 mapboxgl.accessToken に指定している。
読み込んだ Mapbox は map と命名した ID を利用しているため、同じく id = map と設定した div タグに描画させている。
Mapbox の読み込み時にスマホで取得した位置情報が地図の中心に来るようにし、さらにマーカーを立てたものが下図となる。
Mapbox は Google Map のコードに比べると指定している行が多いが、これは JavaScript で読み込む際に map.setLayoutProperty() に指定している country-label や poi-label で地図上に表示される国名や地名、商業施設名などを日本語表記にするために必要な設定となっている。
そのため、Google Map より Mapbox の方がデザインや地図上に表示する内容を細かく指定することができる。
４．スマホの GPS を地図情報サービスと連携する利用例
スマホの GPS を地図情報サービスと連携する利用例としては、現在地から近い店舗をマーカー付きで表示したり、ルート案内をさせるサービスが挙げら、複数の店舗を企業や観光案内のサイトで利用できる。
昨今では災害時に最寄の避難所を表示したり、断水時の給水提供場所などを地図サービスと連携して自治体の公共サービスとして提供する例も増えてきている。
５．ガラケでの GPS の利用例
スマホは JavaScritpt が利用できるので簡単に GPS を利用した位置情報を取得することができるが、ガラケ（フィーチャーフォン）においては JavaScript が使えない機種が多いため前述のコードでは位置情報が取得できない。
しかし、HTML のリンクで利用される a タグにオプションを付けることで位置情報が取得できるようになっている。
これはパソコンでは利用できないが、携帯電話キャリアが独自で開発しているブラウザの仕様だから可能な機能となっている。
位置情報の取得方法は DoCoMo、Softbank、au のそれぞれで取得方法が異なっており、その中で Docomo での緯度経度の表示方法が次の通りである。
尚、位置情報取得に関する詳しい仕様は公式サイトに公開されているので、そちらを参照してほしい。
Docomo のガラケで位置情報を取得する場合は、下記のように HTML ソース内の a タグもしくは form タグに lcs オプションを記述する。
[a タグの記述例]
<a href="{遷移先の URL}" lcs>
[form タグの記述例]
<form method="get" action="{遷移先の URL}" lcs>
上記のサンプルコードでリンクをクリックしたり、form のボタンを押すことで遷移先のページに緯度と経度の値が渡される。
その渡された情報を利用して Google Map や Mapbox など地図サービスと連携して利用する。
ただし、ガラケは JavaScript 版の地図を表示することができないため、地図を画像として表示するスタティック版を利用する必要がある。
上記の a タグ、form タグともに GET メソッドでページ遷移しているため、PHP であれば $_GET[‘lat’]、$_GET[‘lon’] で値を取得することができる。
ここで注意点として、渡される緯度と経度のデータは世界測地系のフォーマットとなっており「+34.40.88.556」「+135.10.58.102」のように「dms(±dd.mm.ss.sss)」の形式となっているので地図サービスで利用するためには 10 進数に変換する必要がある。
dd は 10 進法で度で示し、mm は 60 進法で分を、ss は 60 進法で秒を示しており、最後の sss は ss の小数点以下の数値となっている。
これを 10 進数の形に変換するためには 60 進数の部分を 10 進数に変換し、それらを合計することで算出できる。
尚、mm であるのに対して ss は秒なので、mm と ss の間では通常の時刻の考え方と同じく 60 倍の単位の相違があることに注意が必要である。
これらを元に算出する計算式が下記となる。
$lat = preg_split(“/\+/” , $lat); //値の+取る
$lon = preg_split(“/\+/” , $lon); //値の+取る// 緯度をピリオドごとに切り分け配列に入れる
$lat = preg_split(“/\./” , $lat);
// 経度をピリオドごとに切り分け配列に入れる
$lon = preg_split(“/\./” , $lon);$lat = $lat[0] + ( ($lat[1]/60) + (( $lat[2] + ($lat[3]/1000)) / 3600 ) );
$lon = $lat[0] + ( ($lon[1]/60) + (( $lon[2] + ($lon[3]/1000)) / 3600 ) );
このソースで変換された値は「34.69126555556」「135.18280611111」のような形式となり、Google Map や Mapbox など地図サービスで利用できるようになる。
実際にガラケで取得した位置情報を 10 進数に変換して地図サービスと連携したものが下図となる。
ガラケは JavaScript が利用できないことを想定して、1 ページ目は地図の表示だけさせ、2 ページ目で位置情報を利用した地図表示を行う 2 段階構えが必要なため、上図にある「現在地」をクリックすると位置情報を送信するか確認するポップアップが下図のように表示される。
ウェブサイトに送信する位置情報は 3 種類あり、最新の情報を送る場合は「現在地確認」をクリックすると機種内の GPS が作動して位置情報を取得する。
この時、ガラケはスマホと異なり、位置情報を取得するのに若干の時間を要すため、下図のように情報取得状況を示すバーが表示される。
ガラケで位置情報が取得できれば、ウェブサイトの 2 ページに緯度経度が渡され、現在いる場所の地図が下図のように表示される。
ガラケの機種にもよるが、性能が格段に上がっている現在のスマホに比べるとやや GPS の精度が低く、ガラケの GPS 設定で感度を下げていると現在地から 50m から 300m の誤差が生じることがある。
関連記事
バージョンアップした地図サービス Mapbox v2.x の内容と利用方法
無償で利用できる地図サービス Mapbox は Google Map のように GUI で操作でき、大手ゲーム会社の位置情報ゲームでも採用されているが 2020 年 12 月にバージョン 2.0 になり、旧バージョンから新バージョンで変わった内容と…
【利用者に優しい】YouTube の動画に時間を指定したリンクを設定する方法
YouTube にアップロードされている動画の説明文やコメントの中に時間がリンクになったものを見かけることがあり、そのリンクをクリックすると再生中の動画の時間にジャンプする仕組みになっており利用者にとって便利な機能な…
迷惑メールブロックサービスの利用方法とメーラーで振り分ける方法
電子メールは取引先や個人など情報の伝達手段であるとともに、最近ではインターネット上の会員登録でメールアドレスが必要になるのが一般的であるが、利用しているうちに広告メールやフィッシング詐欺など犯罪に関わる迷惑…
