GoogleマップでHTML5 Geolocation APIを使って現在地を表示する方法

HTML5 Geolocation APIとは？

HTML5 Geolocation APIは、ユーザーの同意のもとで位置情報をWebサイトと共有できる標準的なブラウザ機能です。JavaScriptでデバイスの緯度・経度を取得し、そのデータをバックエンドのWebサーバーへ送信することで、近くのお店や施設の検索、地図上への現在地表示など、位置情報を活かした多彩な機能を実装できます。Geolocation APIが返す座標は、デバイスの地理的な位置を正確に示します。

ここでは、getCurrentPosition()メソッドを使って現在の位置情報を取得し、Googleマップ（Google Static Maps API）へ表示する手順を解説します。

事前準備：Google MapsのAPIキーを取得する

HTML5 GeolocationとGoogleマップを連携させるには、Google Static Maps API用のAPIキーが必要です。以下の手順で無料のAPIキーを発行しましょう。

Google Cloud Consoleにアクセスし、プロジェクトを作成します。
「Maps Static API」を有効化します。
認証情報ページからAPIキーを作成し、コピーしておきます。

発行したAPIキーをコードに組み込むことで、GeolocationとGoogleマップの連携が可能になります。

GoogleマップでHTML5 Geolocation APIを使って現在地を表示する方法

実装例：現在地をGoogleマップに表示する

次のコードでは、ボタンをクリックすると現在地の緯度・経度を取得し、その座標を中心としたGoogleマップの静止画を表示します。YOUR_API_KEYの部分は、前述の手順で取得した自分のAPIキーに置き換えてください。

<!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 + "&zoom=14&size=400x300&key=YOUR_API_KEY";
            document.getElementById("mapholder").innerHTML =
            "<img src ='"+img_url+"'>";
         }
         function errorHandler(err) {
            if(err.code == 1) {
               alert("エラー：位置情報へのアクセスが拒否されました！");
            }else if( err.code == 2) {
               alert("エラー：位置情報を取得できませんでした！");
            }
         }
         function getLocation(){
            if(navigator.geolocation){
               // タイムアウトは60000ミリ秒（60秒）
               var options = {timeout:60000};
               navigator.geolocation.getCurrentPosition
               (showLocation, errorHandler, options);
            }else{
               alert("申し訳ありませんが、このブラウザは位置情報に対応していません。");
            }
         }
      </script>
   </head>
   <body>
      <div id="mapholder"></div>
      <form>
         <input type="button" onclick="getLocation();" value="現在地を表示"/>
      </form>
   </body>
</html>

コードのポイント

showLocation(position)：取得した緯度・経度を「緯度,経度」形式の文字列にまとめ、Google Static Maps APIのURLを生成して地図画像を表示します。
errorHandler(err)：エラーコードに応じてメッセージを表示します。コード1はアクセス拒否、コード2は位置情報が利用できない状態を意味します。
getLocation()：ブラウザがGeolocation APIに対応しているかを判定し、対応している場合はタイムアウト60秒のオプションを指定してgetCurrentPosition()を呼び出します。

動作時の注意点

位置情報の取得にはユーザーの許可が必要です。ブラウザに表示される許可ダイアログで「許可」を選択してください。
Geolocation APIはセキュアコンテキスト（HTTPSまたはlocalhost）でのみ動作します。
APIキーは不正利用を防ぐため、公開リポジトリなどにアップロードせず、適切に管理しましょう。

HTML5のlineTo()メソッドで線を描画する方法

【初心者向け】HTML5のローカルストレージ（localStorage）で名前を永続的に保存する方法

Googleマップの山火事追跡機能の使い方【PC・スマホ対応】
山火事が発生しやすい地域にお住まいの方や、大切な人がそうした地域にいる方は、Googleマップの山火事追跡機能は必ず押さえておきたい存在です。この機能を使えば、火災の発生場所や延焼の範囲、鎮火状況（封じ込め率）などをひと目で確認できます。さらに便利なのは、パソコンのWeb版とスマートフォンアプリの両方で利用できる点です。外出先でも自宅でも、いつでもどこでも山火事の最新情報をチェックできるので、防災対策として非常に心強い機能といえます。パソコン（Web版）で山火事を追跡する方法 Googleマップの公式サイトにアクセスすれば、ほんの数ステップで山火事情報を表示できます。Googleアカウント
GoogleマップとExcelを連携して2地点間の距離を計算する方法【VBAユーザー定義関数】
Excelは幅広い用途に活用できる強力なツールです。特にVBAを組み合わせれば、Excel内でほぼ思い通りの処理を実現できます。もちろん、地図サービスと連携して2地点間の距離を求めることも可能です。本記事では、Googleマップのデータを利用してExcel上で距離を計算する方法を、明快な手順と図解付きで解説します。記事内で使用している無料のExcelワークブックをダウンロードできるので、ぜひご自身でも試してみてください。ユーザー定義関数を使ってGoogleマップで距離を計算するここでは、Googleマップのデータを利用して、「マッカーサー・パーク」から「ジャージーシティ」までの距離を求め