この記事の前提条件
対象: Google Maps JavaScript API(Google Cloudのアカウント・請求先設定が必要)
難易度: ★★★
所要時間: 約30分
「店舗から半径5km以内は配送対応」「最寄駅から徒歩10分圏内」といった、範囲を視覚的に示す地図表現。Googleマップの埋め込みiframeだけでは実現できず、Google Maps JavaScript APIを使ったカスタマイズが必要になります。
⚠️ 単純な埋め込みiframeは無料だが、カスタマイズにはAPIキー(請求先設定)が必要
Googleマップの「共有」から取得できる埋め込みiframeコードだけなら無料で使えますが、円を描画するようなカスタマイズを行うにはJavaScript APIを使う必要があり、これにはGoogle CloudでのAPIキー発行と請求先(クレジットカード)の登録が必須です。月間で一定の無料利用枠はありますが、アクセスが増えると従量課金が発生する可能性がある、という点は事前に理解した上で導入してください。
基本のHTML: 地図を表示する枠を用意する
<div id="map" style="height: 400px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=あなたのAPIキー&callback=initMap" async></script>JavaScript: Circleオブジェクトで円を描画する
function initMap() {
const center = { lat: 35.6812, lng: 139.7671 }; // 中心にしたい店舗の緯度経度
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: center,
});
new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.2,
map: map,
center: center,
radius: 5000, // 半径(メートル単位)
});
}radiusはメートル単位で指定します。「半径5km」なら5000です。kmではなくmで指定する点を間違えると、意図しない大きさの円になってしまうので注意してください。
実務での注意点: APIキーは必ず制限をかける
発行したAPIキーをそのままHTMLに書くと、誰でもソースコードから閲覧できてしまいます。Google Cloudの管理画面で、APIキーに「このドメインからのアクセスのみ許可(HTTPリファラー制限)」を必ず設定してください。制限をかけないと、第三者に不正利用され、身に覚えのない高額な請求が発生するリスクがあります。
まとめ
- 円の描画にはJavaScript APIが必要で、単純な埋め込みiframeより導入のハードルが上がる
- APIキーの発行には請求先の登録が必須。無料枠を超えると従量課金される
Circleオブジェクトのradiusはメートル単位で指定する- APIキーには必ずドメイン制限をかけ、不正利用による高額請求を防ぐ