HTML5とGoogle Map API V3を使って現在地を地図に表示する

急速に進化しているHTML5ですが、その速さゆえにどんなことができるのか、どんな技術があるのか知るだけでも骨が折れますよね。

今回はHTML5の中でも人気がある、GeolocationとGoogle Map API V3を使って、現在位置を取得して、地図上に表示する技術を紹介します。

 

HTML5とは

 

HTML5とは、厳密にはHTMLマークアップ言語の5回目にあたる改訂版のことだが、一般的にはHTML5、CSS3、JavaScritptなどを使ったリッチなサイト構築の総称として使われいることがほとんです。

当ブログでもHTML5は、「HTML5、CSS3、JavaScript」などを含めた内容についてになります。

Geolocationとは

 

無線LAN・WiFi・携帯電話基地局・GPS・IPアドレスなど様々な情報から「緯度、経度などの現在位置が取得できる」

現在地が取得出来るので、友達に現在の居場所情報を送ったり、会社の地図を表示した際に現在の位置からのルートを案内したりと、様々な用途で利用できるかと思います。

 

これまでの位置情報取得と違う点

これまで携帯電話の位置情報を取得しようとしたときなど各キャリアで取得方法が異なっていました。
Geolocationを使うことで、PC、スマートデバイスなど共通のコードで取得することができます。

 

今回のゴール

 

まずは今回作成するサンプルを見てみましょう。皆さんが居る位置の地図が表示されましたでしょうか。

 

Geolocation APIを使う

 

では、実際に現在位置を取得します。
Geolocationでは以下の情報を取得することができます。今回は緯度と、経度を取得します。

取得出来る情報

latitude(緯度)
longitude(経度)
altitude(高度)
accuracy(正確さ)
altitudeAccuracy(高度正確さ)
heading(方角)
speed(速度)

 

navigator.geolocation.getCurrentPositionを使い、位置情報を取得します。

navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
 
function successCallback(position) {
//成功したときの処理
}
 
function errorCallback(error) {
//失敗のときの処理
}

 

位置情報が取得できると、コールバックを受け、下記のようにpotitionオブジェクトから緯度と経度を取得します。
緯度:position.coords.latitude;
経度:position.coords.longitude;

実際にサンプルを動かしてみます。

 

実際のコードはこちら

<html>
<head>
<meta charset="UTF-8">
<title>Geolocationテスト</title>
<script type="text/javascript">
 
function startFunc(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
} else {
document.getElementById("geo").innerHTML = "Geolocationが利用できません";
}
}
 
function successCallback(position) {
//成功したときの処理
result = '緯度:' + position.coords.latitude + '<br />';
result += '経度:' + position.coords.longitude + '<br />';
document.getElementById("geo").innerHTML = result;
}
function errorCallback(error) {
//失敗のときの処理
document.getElementById("geo").innerHTML = 'Geolocationが利用できません';
}
</script>
</head>
<body onload="startFunc()">
<h1>Geolocationで位置情報を取得する</h1>
<div id="geo"></div>
</dody>
</html>

「onload」により、startFuncをキックしています。

「navigator.geolocation」でブラウザがGeolocationに対応しているかどうか判定を行っています。

 

このように位置情報の取得を簡単に行うことができました。記事が長くなってしまいましたので、Google Mapに位置情報を反映するのは次回とさせてください。
それでは失礼いたします。

関連記事

Google Map API V3で、現在地を地図上に表示する(後編)

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。