【訪問可能な範囲】を【googleマップ】で埋め込む方法

googleの半径を表示したマップ

ポイント
googleマップ便利ですよね。
店舗の場所の紹介などで利用している人も多いと思います。
訪問サービスがある店舗の場合、【訪問可能な範囲】をgoogleマップで表現できたら便利ですよね。
さらにそのマップを、自分のホームページに埋め込むこともできます。
(さらには、スマホで見た時に、そのままズームして見ることもできます。)
では、そのやり方を紹介しておきます。

まず、APIを取得するために、以下のサイトに行きます。

地図に円を描く (Google Maps API V3版) – なんちゃって めも
※APIとは、半径を表示させるために必要なもの
※いまはこちらに移動されてます→https://www.nanchatte.com/ymap/circleService.html
yahoo版では、マップをクリックすると、円が表示されます。(設定はほとんど同じ)

詳細を決める

・円の色
・円の半径
・地名を入れる
半径マップの作り方

【KMLを取得する】をクリック

Kmlの取得
※360°を選ぶとキレイな円が出来上がります。

KMLをメモ帳で保存して【.kml】で保存

KML

ポイント
表示されたKMLをコピーして、メモ帳に保存します。
保存する際の拡張子は【.kmlで保存】

google my maps で、【新しい地図を作成】をクリック

※google my maps で検索するとgoogle my maps のページが見つかります。
google my maps

インポートにて、さっきメモ帳でコピーしたファイルをアップロードする

google maps の表示方法
これで、半径が記されます。

マップの名前・説明を記入

google mymapsの説明

共有リンクが出るので、そのリンクを表示したいホームページに貼り付けるとOK!

共有リンク

完成!

このリンクを自サイトのホームページに貼り付けると、半径付きのgoogle mapが表示されます。
さらに、その表示のまま地図内を移動したり、スマホなら拡大したりできますよ。