Googleマップで任意の半径の同心円を描いてサイトに埋め込む方法を解説！

こちらの記事をご覧のみなさんは、小学校の社会科の授業で、コンパスを使って、白地図に小学校から半径3kmの距離を表す同心円を描くという課題に取り組んだことはありませんか？

白地図の右下にある縮尺記号を定規で測って、1kmの距離が1cmの縮尺で表されているのであれば、コンパスの幅を3cmに広げて、小学校の位置にコンパスの針を刺せば、小学校から半径3kmの距離を表す同心円を描くことができます。

昔から白地図に同心円を描くことによって、社会の決まりごとを作ったり、データを分析したりすることに役立ってきました。

例えば、会社の旅費規定を定めるにあたって、会社から100kmの距離を超えるエリアへの出張経費は一律一万円とするとか、校則を定めるにあたって、高校へバイク通勤してよいのは高校から25kmの距離を超えるエリアに住んでいる学生に限るとか、スーパーマーケットを新規出店するにあたって、複数の競合他店舗の商圏分析をするといった活用方法です。

アナログの時代であれば、同心円を描いた白地図を切り抜いて会議資料に貼付するようなこともありましたが、デジタルの時代である現代では、白地図に同心円を描くという行為が前時代的になってしまいました。それでは現代では、どのような方法によって、地図に同心円を描くことができるのでしょうか？

この記事では、世界中で最も利用されている地図アプリである、Googleマップに同心円を描くことができ、さらには同心円を描いたGoogleマップをサイトに埋め込み、閲覧する方法を順番にご紹介していきます。

最初に、Googleマップに同心円を描く方法についてご紹介していきます。

Googleマップには、住所や施設名を入力すると、その場所を表示してくれる機能や、現在地から目的地までの経路を表示してくれる機能、現在地や目的地周辺のスポットを検索する機能、ストリートビューや空撮地図を表示する機能などが標準で備わっていますが、地図に同心円を加筆する機能は備わっていません。それでは、どのようにすればGoogleマップに同心円を描くことができるのでしょうか？

実は、外部のAPIサービスを使うことによって、Googleマップに同心円を描くことができるようになります。

Googleマップに同心円を描くためのAPIサービスとしておすすめするのは、「なんちゃって☆めも」が提供している「地図に円を描く」というサービスです。

「地図に円を描く」では、余計な機能が実装されていないため、プログラミングに携わったことがない人や、ITにそれほど明るくない人でも、直感的に使いこなすことが可能です。

それでは、「地図に円を描く」を使って、Googleマップに同心円を描く方法についてご紹介していきます。

検索エンジンに、「なんちゃって☆めも」と「地図に円を描く」を入力して検索してみてください。画面の上部に「地図に円を描く（Google Maps API V3版）-なんちゃって☆めも」と表示されるので、そちらをクリックしてリンク先に進んでください。

リンク先を開くと、下の画像のようなページが表示されます。

いよいよ、「地図に円を描く」を使って、Googleマップに同心円を描いていきます。

Googleマップの任意の場所をクリックすると、クリックした場所にピンが刺さります。
これが、これから描く同心円の中心点になります。

同心円の中心点を設定する方法がもう一つあります。画面右上にある「地名で移動」メニュー下部の検索窓に、任意の住所や施設名を直接入力する方法です。任意の住所や施設名を直接入力したら、検索窓右側の「Go!」をクリックするか、「enter」キーを押すと、任意の住所や施設にピンが刺さります。

検索窓右側の「Go!」をクリックするか、「enter」キーを押すと、Googleマップの縮尺が変化することがありますが、ダブルクリックやトラックパッドのピンチアウトなどでは元の縮尺に戻すことができないので、画面右下の「＋」もしくは「−」ボタンを押して縮尺を調節してください。

続いて、これから描く同心円の半径を設定します。画面右上にある「円の半径」メニュー下部の入力窓に、任意の数値を直接入力します。

入力窓下部にあるプルダウンメニューから、これから描く同心円の半径の単位を変更することができます。これから描く同心円の半径の単位は、「km（キロメートル）」、「m（メートル）」、「マイル」、「海里」から選択することができます。

これから描く同心円の中心点と、同心円の半径、同心円の半径の単位を設定したら、次に同心円のデザインを選択していきます。

画面上部にある「円の色」メニューから、同心円の色を選択します。