Googleマップは日常生活からビジネスまで、幅広いシーンで使われる便利な地図ツールです。
その中でも「半径を地図上に表示したい」と思ったことはありませんか？
例えば、自宅から半径5km以内のスーパーや、災害時の避難範囲、営業活動のエリア把握など、円形のエリアを視覚的に確認したい場面は意外と多いものです。
しかし、標準のGoogleマップには「半径を描く」機能が搭載されていないため、少し工夫が必要です。
この記事では、Googleマップ上に半径を表示する方法をいくつか紹介し、実用的な使い方まで丁寧に解説します。
Googleマップの標準機能では、地点から特定の距離を円で表示する機能はありません。
そのため、外部ツールやGoogleマイマップ、JavaScript APIなどを活用して「半径を描く」必要があります。
ここでは、大きく分けて次の3つの方法をご紹介します。
目的に応じて使い分けましょう。
「距離円を描きたいだけ」なら、専用のWebツールを使うのが一番手軽です。
このように、プログラム不要で即座に半径表示ができるため、個人利用には非常に便利です。
ただし、地図の保存や共有に制限がある場合があるので注意しましょう。
Googleマップには「マイマップ」という、自分専用の地図を作成・共有できる機能があります。
このマイマップを使えば、手動で「円形の図形」を描いて半径エリアを表現できます。
より正確に、動的に、しかも半径が可変な地図を作りたい場合には、Google Maps JavaScript APIを使った方法が最適です。
これはWebサイト上で地図をカスタム表示したい開発者やビジネスユーザー向けの方法です。
<!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アプリケーションなどに応用できます。
実際にどんなシーンで使えるのか、以下に具体例を紹介します。
シンプルな機能ながら、使い方によっては非常に役立ちます。
Googleマップで半径を表示するには、用途に合わせて以下のように選ぶのがおすすめです。
| 目的 | 方法 | 難易度 |
|---|---|---|
| 手軽に半径を描きたい | Webツールを使う | ★☆☆ |
| 地図を保存・共有したい | Googleマイマップ | ★★☆ |
| 高精度・動的に表示したい | Google Maps API | ★★★ |
それぞれの方法にメリットと注意点があるため、自分のスキルや目的に応じて最適な方法を選んでみてください。
今後の地図活用にきっと役立ちますよ！