Gps/ブラウザで位置情報を取得

Gps/標高を取得する

連載：位置情報を使ってみよう（2） ブラウザで位置情報を取得してみよう

http://www.atmarkit.co.jp/fnetwork/rensai/ichijouhou02/03.html

新日鉄ソリューションズ 笹尾和宏 2009/6/19

Google Mapsとの連携

　取得した緯度・経度に対応した地図が表示されるように変更してみましょう。今回は地図の表示にGoogle Maps APIを利用しました。ソースコードの追加部分を赤字で示します。

[サンプルの実行]

図5　PlaceEngine? を利用した Wi-Fiの電波による位置取得とGoogle Maps との連携

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

html lang="ja">

head>

meta http-equiv="Content-Type" content="text/html; charset=utf-8">

meta http-equiv="Content-Script-Type" content="text/javascript">

meta http-equiv="Content-Style-Type" content="text/css">

title>Wi-Fiの電波強度から位置情報を取得</title>

script src="http://www.placeengine.com/javascripts/pengine.js" type="text/javascript"></script>

script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=GoogleAPIKey"></script>

script type="text/javascript">

!-- var pe = {}; var peKey = "PlaceEngineAPIKey";

var gmap = {};

function initPlaceEngine?() {

// PlaceEngine の利用準備

pe = new PEngine({

// pe.getLocation() が呼び出されたときの処理

onGetLocation?: function(longitude, latitude, r, info) {

// HTML表示の更新

document.getElementById?("latitude").innerHTML = latitude;

document.getElementById("longitude").innerHTML = longitude;
document.getElementById("address").innerHTML = info.addr;
document.getElementById("floor").innerHTML = info.floor;
document.getElementById("result").innerHTML = r;

// Google Maps の地図を表示

if (GBrowserIsCompatible?()) {

gmap = new GMap2(document.getElementById("map"));

// 緯度、経度、拡大率(14)を指定

gmap.setCenter(new GLatLng?(latitude, longitude), 14);

}
},
idstatus:"message",
appkey:peKey
});

}

/script>

/head>

body onLoad="initPlaceEngine?()" onunload="GUnload()">

h2>Wi-Fiの電波強度から位置情報を取得</h2>

Wi-Fiの電波から位置情報を取得し、近くの駅を表示します<br> Place Engine APIの詳細は、 <a href="http://www.placeengine.com/doc">http://www.placeengine.com/doc</a> で確認できます。<br>

input alt="位置を教える" src="wide_bt2.png" type="image" onclick="pe.registerLocation()" onkeypress="pe.registerLocation()">

input alt="現在地を取得" src="wide_bt1.png" type="image" onclick="pe.getLocation()" onkeypress="pe.getLocation()">

hr>

div id="message">ネットワークに接続されていないか JavaScript? が有効ではありません</div>

table summary="取得した位置情報">

tr><td>緯度:</td><td id="latitude">--</td></tr>

tr><td>経度:</td><td id="longitude">--</td></tr>

tr><td>住所:</td><td id="address">--</td></tr>

tr><td>フロア情報:</td><td id="floor">--</td></tr>

tr><td>推定精度 (m):</td><td id="result">--</td></tr>

/table>

hr>

div id="map" style="width:500px;height:300px">地図が表示できません</div>

a href="http://www.placeengine.com/"><img src="logo.png" border="0" alt="PlaceEngine?"></a>

/body>

/html> 　では、追加した部分を見ていきましょう。

9行目：Google MapsのAPIを読み込んでいます。GoogleAPIkeyには先ほどのGoogle APIキーが利用できますので同じ値を設定してください。

script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=GoogleAPIKey"></script> 17～19行目： Google Mapsのオブジェクトを保持する変数を用意しています。

var gmap = {}; 34～41行目：地図を表示するためのコードを記述します。Google Map APIで対応ブラウザをチェック（GBrowserIsCompatible?()）した後、gmapに地図のオブジェクトを割り当てます。また、取得した緯度（latitude）・経度（longitude）が画面の中央に来るようにするため、gmap.setCenter() を呼び出します(40行目)。

if (GBrowserIsCompatible?())

gmap = new GMap2(document.getElementById("map"));

// 緯度、経度、拡大率(14)を指定

gmap.setCenter(new GLatLng?(latitude, longitude), 14);

}

51行目：Google Maps APIを利用した際に、一部のブラウザがメモリリークを起こすバグに対応するため、bodyタグのonLoadに、Google API の GUnload() （ ブラウザのメモリ リークの削減）を追加しました。

body onLoad="initPlaceEngine?()" onunload="GUnload()"> 68行目：地図の表示領域です。37行目のdocument.getElementById?("map") でこの領域 （id=”map”）に地図が表示されます。

div id="map" style="width:500px;height:300px">地図が表示できません</div> 　Google APIも使いやすくできているため、このように、簡単に連携できます。

ブラウザで位置情報を取得してみよう IPアドレスを利用した位置情報の取得 Wi-Fiの電波を利用した位置情報の取得 Google Mapsとの連携 JSONPを利用したマッシュアップ 位置情報を使ってみよう バックナンバー 第1回 位置情報を取得する仕組み 第2回 ブラウザで位置情報を取得してみよう