Googleマップで半径を表示する方法｜距離を可視化して便利に使おう！

Googleマップは日常生活からビジネスまで、幅広いシーンで使われる便利な地図ツールです。
その中でも「半径を地図上に表示したい」と思ったことはありませんか？
例えば、自宅から半径5km以内のスーパーや、災害時の避難範囲、営業活動のエリア把握など、円形のエリアを視覚的に確認したい場面は意外と多いものです。
しかし、標準のGoogleマップには「半径を描く」機能が搭載されていないため、少し工夫が必要です。
この記事では、Googleマップ上に半径を表示する方法をいくつか紹介し、実用的な使い方まで丁寧に解説します。

Googleマップに半径を表示する方法はある？

Googleマップの標準機能では、地点から特定の距離を円で表示する機能はありません。
そのため、外部ツールやGoogleマイマップ、JavaScript APIなどを活用して「半径を描く」必要があります。
ここでは、大きく分けて次の3つの方法をご紹介します。

  1. 外部ツールで描く方法（例：円を描けるWebサービス）
  2. Googleマイマップを使って半径を描く
  3. Google Maps JavaScript APIを使ってカスタム表示

目的に応じて使い分けましょう。

方法①：Webツールを使って簡単に半径を表示する

「距離円を描きたいだけ」なら、専用のWebツールを使うのが一番手軽です。

おすすめツール：

使い方の例（Freemap Tools）：

  1. 上記サイトを開く
  2. 地図をドラッグして中心地点を指定
  3. 「Radius Distance」に任意の距離（例：5km）を入力
  4. 「Draw Radius」をクリックすると、円が地図上に表示される

このように、プログラム不要で即座に半径表示ができるため、個人利用には非常に便利です。
ただし、地図の保存や共有に制限がある場合があるので注意しましょう。

方法②：Googleマイマップで半径表示を作成する

Googleマップには「マイマップ」という、自分専用の地図を作成・共有できる機能があります。
このマイマップを使えば、手動で「円形の図形」を描いて半径エリアを表現できます。

手順：

  1. Googleマイマップ にアクセスし、「新しい地図を作成」
  2. 地図の任意の場所を表示
  3. 左上の「線を描画」アイコン（線に点が付いたボタン）をクリックし「線や図形を追加」を選択
  4. 地図上に円形になるように点を打ち、最後は始点と終点をつなげて図形を完成させる
  5. 「編集」で色や名前を設定し、保存

注意点：

  • 手動での円形作成のため、正確な半径には若干の誤差が出ます
  • 距離目安のガイドとして利用するのに適しています

方法③：Google Maps APIで正確な円を描画する

より正確に、動的に、しかも半径が可変な地図を作りたい場合には、Google Maps JavaScript APIを使った方法が最適です。
これはWebサイト上で地図をカスタム表示したい開発者やビジネスユーザー向けの方法です。

準備：

  1. Google Cloud PlatformでAPIキーを取得（無料枠あり）
  2. 自分のHTMLにGoogle Maps APIのスクリプトを組み込む

サンプルコード（HTML）：

<!DOCTYPE html>
<html>
  <head>
    <title>半径を表示するGoogleマップ</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
      function initMap() {
        const center = { lat: 35.681236, lng: 139.767125 }; // 東京駅
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 13,
          center: center,
        });

        const circle = new google.maps.Circle({
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.2,
          map,
          center: center,
          radius: 5000, // メートル単位で指定（例：5km）
        });
      }
    </script>
    <style>
      #map {
        height: 500px;
        width: 100%;
      }
    </style>
  </head>
  <body onload="initMap()">
    <h2>Googleマップで半径を表示する例</h2>
    <div id="map"></div>
  </body>
</html>

この方法を使えば、ユーザーの入力に応じて動的に距離を変更することも可能です。
例えば、検索エリアの範囲を絞るWebアプリケーションなどに応用できます。

半径表示の活用例

実際にどんなシーンで使えるのか、以下に具体例を紹介します。

  • 自宅から半径3km以内のドラッグストアや病院を探す
  • 商圏分析（店舗の立地選定やチラシ配布エリアの可視化）
  • 災害時の避難可能エリアを家族で共有
  • 営業や訪問エリアの計画立案
  • 通学・通勤圏の目安確認

シンプルな機能ながら、使い方によっては非常に役立ちます。

まとめ：目的に応じた方法を選ぼう

Googleマップで半径を表示するには、用途に合わせて以下のように選ぶのがおすすめです。

目的方法難易度
手軽に半径を描きたいWebツールを使う★☆☆
地図を保存・共有したいGoogleマイマップ★★☆
高精度・動的に表示したいGoogle Maps API★★★

それぞれの方法にメリットと注意点があるため、自分のスキルや目的に応じて最適な方法を選んでみてください。
今後の地図活用にきっと役立ちますよ！

タイトルとURLをコピーしました