HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【初心者向け】HTML5ジオロケーションとGoogleマップで現在地を表示する方法

HTML5のGeolocation API（ジオロケーションAPI）を使うと、Webサイトと位置情報を共有できるようになります。JavaScriptでデバイスの緯度・経度を取得し、そのデータをバックエンドのWebサーバーへ送信することで、周辺店舗の検索や地図上への現在地表示など、位置情報を活用したさまざまな機能を実装できます。ジオロケーションの座標は、デバイスの地理的な位置を正確に特定するための情報です。

getCurrentPosition()メソッドの仕組み

Geolocation APIでは、getCurrentPosition()などのメソッドに対して、位置情報を取得するためのコールバック関数を指定します。これらのメソッドは非同期で実行され、取得結果として完全な位置情報を保持するPositionオブジェクトが渡されます。

本記事では、最も一般的に使われるgetCurrentPosition()メソッドを利用します。HTML5ジオロケーションとGoogleマップを組み合わせて現在地を表示するには、事前にGoogle Static Maps API用のAPIキーを設定しておく必要があります。

Google Maps APIキーの取得手順

  1. Google Cloud Consoleにアクセスします。
  2. プロジェクトを作成し、「Maps Static API」を有効化します。
  3. 認証情報ページから無料のAPIキーを発行します。
  4. 発行したキーを後述のサンプルコード内の「key=」以降に貼り付けてください。

【初心者向け】HTML5ジオロケーションとGoogleマップで現在地を表示する方法

現在地を表示するサンプルコード

以下のコードを実行すると、ボタンをクリックした際にHTML5ジオロケーションで現在地の緯度・経度を取得し、Googleマップの静止画として表示できます。

<!DOCTYPE HTML>
<html>
   <head>
      <script type="text/javascript">
         function showLocation(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var latlongvalue = position.coords.latitude + ","
            + position.coords.longitude;
            var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
            +latlongvalue+"&amp;zoom=14&amp;size=400x300&amp;key
            =AIzaSyAa8HeLH2lQMbPeOiMlM9D1VxZ7pbGQq8o";
            document.getElementById("mapholder").innerHTML =
            "<img src='"+img_url+"'>";
         }
         function errorHandler(err) {
            if(err.code == 1) {
               alert("Error: Access is denied!");
            } else if( err.code == 2) {
               alert("Error: Position is unavailable!");
            }
         }
         function getLocation(){
            if(navigator.geolocation){
               // timeout at 60000 milliseconds (60 seconds)
               var options = {timeout:60000};
               navigator.geolocation.getCurrentPosition
               (showLocation, errorHandler, options);
            } else{
               alert("Sorry, browser does not support geolocation!");
            }
         }
    </script>
   </head>
   <body>
      <div id="mapholder"></div>
      <form>
         <input type="button" onclick="getLocation();" value="Get Location"/>
      </form>
   </body>
</html>

コードのポイント解説

  • showLocation()： 取得成功時に呼び出され、position.coordsから緯度・経度を取り出し、Static Maps APIのURLを組み立てて地図画像を表示します。
  • errorHandler()： エラー発生時の処理を担います。code 1はアクセス許可の拒否、code 2は位置情報が取得できない状態を意味します。
  • options： タイムアウトを60秒（60000ミリ秒）に設定しています。環境に応じて変更可能です。
  • ブラウザ対応チェック： navigator.geolocationの存在確認を行い、非対応ブラウザではアラートを表示します。

なお、実際に運用する際は、サンプル内のAPIキーを必ずご自身で発行したキーに置き換えてください。また、位置情報を扱う場合はHTTPS環境での動作が推奨されており、ユーザーの許可なく位置情報を取得することはできません。プライバシーへの配慮も忘れずに行いましょう。

  1. iPhoneのGoogleマップで現在地をリアルタイムに友達と共有する方法

    夜道の暗い路地を一人で歩いたり、心細い時間帯に自転車で移動したりするのは、少し不安になりますよね。時には、どうしても避けられない恐ろしく感じる道を通らなければならないこともあります。ルート自体は変えられなくても、移動中にリアルタイムの位置情報を友人や家族と共有すれば、安心感が大きく変わります。Googleマップのリアルタイム位置情報共有機能を使えば、現在地や進行中のルート、到着予定時刻(ETA)を、SMSやWhatsApp、Messengerなどのサードパーティアプリを通じて簡単に共有できます。「今向かっている途中」「無事に到着したよ」といったメッセージ代わりにもなる便利な機能です。Googl

  2. Googleマップで現在地を一時的に共有する方法【初心者向けガイド】

    友人との待ち合わせ場所がなかなか見つからないとき、あるいは出勤が遅れそうなときに上司から現在地を聞かれたとき——そんな場面で役立つのが、Googleマップの「現在地の共有」機能です。この機能を使えば、現在地を指定した期間だけ一時的に共有できます。現在地共有機能の仕組みGoogleマップの位置情報共有機能を利用すると、自分の現在地が相手のGoogleマップ上に表示され、同時に相手の位置も自分のマップへ反映されます。お互いが移動中であっても位置情報はリアルタイムで更新されるため、「今どこにいる？」というやり取りがぐっと減ります。なお、この機能を使うには、共有相手もGoogleマップのユーザーである