Googleマップに同心円や複数の円を描きホームページに埋め込む方法

地図上にある地点を中心として円を描くと、その地点から他の地点までの距離や、その地点から一定の範囲内にある複数のスポットを一目で簡単に知ることができます。

地図上に円を描けるととても便利なのですが、Googleマップには同心円を描く機能は搭載されていません。そこで、一般公開されている既存のAPIを利用するのがお勧めです。外部のサービスを使って、地図上に同心円を描く方法をご紹介します。

地図上に同心円を描くことができるAPIはいくつかありますが、最も簡単で使いやすいのは「なんちゃって☆めも」が提供している「地図に円を描く」というサービスです。

それでは、この地図上に指定の場所を中心とした円を描いていきます。

中心からの距離を表す円を描く方法を説明していきます。

地図上に円を描くためには、何よりもまず円の中心となるスポットを指定する必要があります。右上の検索ボックスにスポットの名前を入力し、「Go!」をクリックします。

例えば「新橋駅」を中心とした円を表示させる場合は、新橋駅と入力して「Go!」をクリックします。

上の画像のように、新橋駅に自動でピンが表示されました。このピンが、これから描く円の中心となります。中心を決めたら、続いては「円の半径」、すなわち中心からの距離を指定します。

上のテキストボックスに任意の数字を入力します。下のドロップダウンリストは単位を選択することができます。新橋駅からの距離1.5kmの範囲を知りたい場合は、半径1.5kmの円を描画します。円の半径を入力するテキストボックスには「1.5」と入力し、単位は「km」を指定します。

これで円の中心地と半径は決まりました。ここからは円のデザインを決めていきます。

「円の色」で、円の色を自由に選択することができます。選択する方法は簡単で、選択したい色の「〇」をクリックしてチェックを入れるだけです。デフォルトで赤が選択されていますので、今回はこのまま赤い円を描きます。

続いて、「動作」で円のレイアウトを選択します。

レイアウトは、下記の三パターンから選ぶことができます。
①：円の中を塗りつぶす
②：円の枠線のみ描画する
③：選んだピンの近くに任意のテキストを表示する（円は描画しない）

今回は範囲を塗りつぶす円を描きます。上の画像の①のところにチェックをつけます。

これで円を描く準備は完了しました。これから実際に地図上に円を描いていきます。まずは左上の「操作」を設定します。