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（メートル）」、「マイル」、「海里」から選択することができます。

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

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

画面右上にある「動作」メニューから、同心円の表示形式を選択します。

「動作」メニュー左上のデザインを選択した場合、これから描く同心円は塗りつぶされたものになります。「動作」メニュー左下のデザインを選択した場合、これから描く同心円は枠線のみになります。「動作」メニュー右上のデザインを選択した場合、同心円は描かれませんが、四角い枠線で囲まれた任意の文字列が表示されます。

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

画面左上の「操作」メニューで、鉛筆マークを選択します。

鉛筆マークを選択できたら、これから描く同心円の中心点となるピンをクリックします。

これで、Googleマップの上に同心円を描くことができました。

Googleマップの上に描いた同心円のデザインがイメージと異なっていたり、同心円の半径の数値が誤っていたりして、一度Googleマップの上に描いた同心円を消したいと思ったときは、画面左上の「操作」メニューで、消しゴムマークを選択して、Googleマップの上に描いた同心円上をクリックしてください。

Googleマップの上に描いた同心円を消すことができました。

ここまでの手順を繰り返すことによって、Googleマップの上に複数の円を描くことも可能です。

例えば、東京駅、池袋駅、新宿駅、渋谷駅にある複数の店舗からそれぞれ半径3kmの距離の商圏分析をするといったことが可能です。

また、Googleマップの上に、一つの中心点から、半径の異なる同心円を複数描くことも可能です。

例えば、会社からの距離に応じて出張経費が変動するといった場合に便利な機能です。

「地図に円を描く」を利用して、Googleマップで同心円を描く時に、注意しなければいけない点が2つあります。

ここからは、その注意点についてお伝えしていきます。

「地図に円を描く」を利用して、Googleマップで同心円を描く時に、注意しなければいけない点の1つ目は、一つの中心点から、半径の異なる同心円を複数描くと、地図上の文字が見えなくなってしまうということです。

「地図に円を描く」を利用して、Googleマップ上に、一つの中心点から、半径の異なる同心円を複数描く際に、地図上の文字が見えなくなってしまうと困るようであれば、枠線のみのデザインの同心円を併用するとよいでしょう。

「地図に円を描く」を利用して、Googleマップで同心円を描く時に、注意しなければいけない点の2つ目は、一度作成した円は編集できないということです。

Googleマップの上に描いた同心円のデザインがイメージと異なっていたり、同心円の半径の数値が誤っていたりして、一度Googleマップの上に描いた同心円を編集したいと思ったときは、画面左上の「操作」メニューで、消しゴムマークを選択して、Googleマップの上に描いた同心円上をクリックして消さなければいけません。

設定を直した上で、再度、画面左上の「操作」メニューで、鉛筆マークを選択し、新たな同心円をGoogleマップの上に描かなければなりません。

ここまでは、Googleマップに同心円を描く方法についてご紹介してきました。

ここからは、同心円を描いた地図をGoogleマップで埋め込み、同心円を描いた地図を編集したり、サイトに地図を埋め込みしたりする方法をご紹介していきます。

Googleマップに地図を読み込むためには、KMLデータを取得する必要があります。

「地図に円を描く」ページ下部の「KMLを取得する」をクリックします。

「KML作成」というウィンドウが開きますので、「続ける」ボタンをクリックします。

KMLデータを表示するウィンドウが開きますので、「[KML]全てを選択」ボタンをクリックします。

選択されたKMLデータを「Ctrl+C」もしくは「command+C」でコピーし、テキストエディタにペーストします。

テキストエディタにペーストしたKMLデータを、kml形式で保存します。

これでKMLデータの取得ができました。

ここから、KMLデータをGoogleマップに埋め込みしていきます。

まず、Googleマップを開き、左上の「≡」ボタンをクリックします。

メニュー画面から、「マイプレイス」ボタンをクリックします。

「マイマップ」タグを選択し、「地図を作成」ボタンをクリックします。

「無題の地図」が作成されるので、「インポート」ボタンをクリックします。

kml形式で保存したデータを読み込むと、KMLデータがGoogleマップに埋め込みされました。

Googleマップで同心円を描いた地図を編集することもできます。

編集したい同心円をクリックすると、編集ウィンドウが開きます。

ペンキ缶のボタンをクリックすると、同心円のスタイルを編集することができます。

同心円のスタイル編集ウィンドウでは、同心円の色やポリゴンの透明度、枠線の幅を変更することができます。

編集ウィンドウで鉛筆のボタンをクリックすると、同心円の情報を編集することができます。

同心円の情報編集ウィンドウでは、選択した同心円の名前や説明を変更することができます。

Googleマップで同心円を描いた地図をサイトに埋め込みすることもできます。

メニューの「プレビュー」ボタンをクリックします。

プレビュー画面に遷移します。

メニューの「共有」ボタンをクリックします。

共有設定ウィンドウが開きますので、「自分のサイトに埋め込む」ボタンをクリックします。

「この地図を埋め込む」ウィンドウが開きますので、表示されたソースコードを任意のサイトにペーストすることで、作成した地図を埋め込みすることができます。

「地図に円を描く」という外部のサービスを使えば、Googleマップに同心円を描くことができます。また、「地図に円を描く」からkmlデータをインポートすれば、同心円を描いたGoogleマップのソースコードを取得することができます。

同心円を描いたGoogleマップを、企業のホームページやご自分のブログに埋め込みしてみてください。