Googleマップで同心円を描く方法『地図に円を描く』
地図上にある地点を中心として円を描くと、その地点から他の地点までの距離や、その地点から一定の範囲内にある複数のスポットを一目で簡単に知ることが可能です。
地図上に円を描けるととても便利なのですが、Googleマップには同心円を描く機能は搭載されていません。そこで、一般公開されている既存のAPIを使用するのがお勧めです。外部のサービスを利用して、地図上に同心円を描く方法をご解説します。
「地図に円を描く」を開く
地図上に同心円を描くことが可能なAPIはいくつかありますが、最も簡単で利用しやすいのは「なんちゃって☆めも」が提供している「地図に円を描く」というサービスです。
それでは、地図上に指定の場所を中心とした円を描いていきます。
中心からの距離を表す円を描く
中心からの距離を表す円を描く方法を説明していきます。
地図上に円を描くためには、何よりもまず円の中心となるスポットを指定する必要があります。右上の検索ボックスにスポットの名前を記入し、「Go!」を押します。
例えば「新橋駅」を中心とした円を出しる場合は、新橋駅と記入して「Go!」を押します。
上の画像のように、新橋駅に自動でピンが表示されました。このピンが、これから描く円の中心となります。中心を決めたら、続いては「円の半径」、すなわち中心からの距離を指定します。
上のテキストボックスに任意の数字を記入します。下のドロップダウンリストは単位を選択することが可能です。新橋駅からの距離1、5kmの範囲を知りたい場合は、半径1、5kmの円を描画します。円の半径を記入するテキストボックスには「1、5」と記入し、単位は「km」を指定します。
これで円の中心地と半径は決まりました。ここからは円のデザインを決めていきます。
円のデザインを指定する
「円の色」で、円の色を自由に選択することが可能です。選択する方法は簡単で、選びたい色の「〇」を押してチェックを入れるだけです。デフォルトで赤が選択されていますので、ここではこのまま赤い円を描きます。
続いて、「動作」で円のレイアウトを選びます。
レイアウトは、下記の三パターンから選ぶことが可能です。
①：円の中を塗りつぶす
②：円の枠線のみ描画する
③：選んだピンの近くに任意のテキストを表示する（円は描画しない）
ここでは範囲を塗りつぶす円を描きます。上の画像の①のところにチェックをつけます。
円を描く
これで円を描く用意は終了しました。これから実ときに地図上に円を描いていきます。まず最初は左上の「操作」を設定します。
「操作」では、円やピンを新しく作成・追加するか、描いた円やピンを消去するかを選びます。
①：（鉛筆マーク）円やピンを描く
②：（消しゴムマーク）地図上に出した円やピンを消去する
ここではまず新しい円を描画しますので、①にチェックを入れます。
これで円を描くための設定は終了です。ここまで来れば、円を描くのはとても簡単です。地図上に表示されている、円の中心にしたいピンをクリックするだけです。
ピンをクリックすると、このようになります。
新橋駅から半径1、5km範囲の赤い円が表示されました。このままだと縮尺が大きいので、円の範囲のあたりを拡大してみます。拡大・縮小はマウスのスクロールバーなどではできないので、画面右下の「＋」、「－」で行います。
拡大するとこのように見えます。
円は透過性があります。新橋駅から1、5kmの距離はどうなっているのか、視覚的に理解することが可能なようになりました。
上記の作業を繰り返すことで、複数の円を描くことも可能です。
円やピンを消去する
地図上に描いた円やピンを消去するには、まず「操作」のところで消しゴムマークにチェックを入れます。
消しゴムマークにチェックを入れたら、消去したい円やピンをクリックするだけです。円を消去する場合は、円のどの部分を押しても構いません。
ピンを消す場合も同様に、「操作」で消しゴムマークを選び、ピンをクリックするだけです。
ピンが消えました。
同心円を描く
これまでは一つの円を描く方法をご解説しましたが、Googleマップに同心円を描くことも可能です。ここからは、同心円を描く方法をご解説します。
二重の同心円を描く
同心円を描く方法はごく簡単で、半径の異なる複数の円を重ねて描くだけです。先ほどと同じく「円の半径」と「円の色」を指定し、中心にしたいピン（ここでは新橋駅）を押します。ここでは、「新橋駅から半径2km範囲の赤い塗りつぶし円」を描く設定にしました。
あとは「操作」で鉛筆マークを選び、新橋駅のピンをクリックするだけです。このようになります。
上の画像のように、新橋駅から1、5km範囲の円の上に、2km範囲の円が表示されました。円が重なっているところは色が濃くなっているので、1、5km範囲、1、5km～2km範囲、2km範囲の外側を明確に区別することが可能です。
複数の円を重ねて同心円を描くときの気を付ける点
同心円を活用することで異なる二点間の距離をより正確に把握することが可能です。
一方、透過性のある二つの円を重ねると、中の円の色が濃くなり、地図上に表記されている文字が見えにくくなる場合があります。特に三重以上の円になると中の円の境界や範囲、地図上の表記がかなり見にくくなります。
この場合は、外側の円の色を変えるなどの工夫をすると、見やすさを保ちながら同心円を出しることが可能です。例えば「円の色」で、外側の円の色を黄色に設定します。
同じ三重円でも、それぞれの円の境界がはっきりし、かなり見やすくなりました。
また、円の色を変える以外にも、外側の円を外枠のみ出しるという方法もあります。方法は、「動作」のところで円の外枠の線のみ描画する設定にチェックを入れ、中心となるピンを押します。
尚、一旦描いた円の色を変えたり外枠表示だけにすることは可能でせん。円を編集したい場合は、編集したい対象の円を一旦消去し、円の色・半径・動作を設定し直してから改めて円を描く必要があります。
円の中心となるピンを手動で配置する
ここまでは例として新橋駅を中心とした円を描く方法を見てきました。駅や利便施設は地図上で検索が可能なので、左上の「地名で移動」を使うと簡単且つ正確に円の中心として指定することが可能です。
しかし、自宅などを中心とした円を描きたい場合は、「地名で移動」が使えません。このようなパターンでは、地図上の任意の位置を押してピンを立て、そこを中心に円を描くことが可能です。クリックする前に、「操作」で鉛筆マークにチェックを入れておきます。
このように、任意の場所を押してピンを立て、そこを中心とした円を描くことが可能です。
Googleマップで同心円をホームページに埋め込む方法
ここまでは、「地図に円を描く」というサービス上で円を描く方法をご解説しました。ここからは、作成した円をGoogleマップにインポートしたり、自分自身のホームページに埋め込む方法をご解説します。
Googleマップに読み込む
円を出した地図をGoogleマップに読み込むには、KMLデータをダウンロードし、それをGoogleマップにインポートする必要があります。
KMLデータを取得する
KMLデータを取得するには、地図の下部にある「使用方法」から「KMLを取得する」というボタンを押します。
続いて「KML作成 チェックしてください」というポップアップが出るので、「続ける」を押します。
KMLが表示されます。「「KML」全部を選択」を押してKMLを全部選び、右クリックあるいはCtrl＋Cでコピーします。
KMLをコピーしたら、テキストエディタを開いてKMLをペーストます。ここではメモ帳を使用します。
ペーストたら保存します。気を付ける点としては、「ファイルの種類」を「すべてのファイル 」に変更して、拡張子を手記入で「～～、kml」にして保存します。
保存が終了したら、KMLデータの取得は終了です。
KMLデータをGoogleマップにインポートする
取得したKMLデータをGoogleマップにインポートしていきます。まず最初はGoogleマップを開き、左上の「≡」を押してメニューを開きます。
メニューの中から「マイプレイス」を押します。
「マイマップ」から「地図を作成」へと進みます。
「無題の地図」が作成されます。地図の名前はクリックすると自由に変更可能なので、ここでは「テスト」としておきます。
これからここに先ほど取得したKMLデータを読み込んでいきます。メニューの「インポート」を押します。
「パソコンからファイルを選択」を押します。
取得したKMLデータを選び、「開く」を押します。
KMLデータの読み込みが終わると、Googleマップに円が表示されます。
これでKMLデータのインポートは終了です。取り込んだ地図はGoogleドライブに自動的に保存されます。
Googleマップ上で円の詳細を編集する
Googleマップではレイヤの名前や円の名前を自分自身がわかりやすいように編集したり、円の色を変えたりすることが可能です。
レイヤの名前を編集する
左上のメニューの「test、kml」というところをクリックすると、レイヤ名を編集することが可能です。デフォルトではインポートしたKMLファイルの名前がそのままレイヤ名になっています。
名前は自由に決めることが可能です。任意の名前を記入したら、「保存」を押します。
円の名前やレイアウトを編集する
左側のメニューに円とピンの名前が表示されています。この名前をクリックすることで、オブジェクトの詳細を編集することが可能です。デフォルトでは名前は全部「無題」となっています。
試しに黄色い円を編集します。メニューの中の黄色い円（無題）をクリックすると、地図上に黄色い円の詳細が表示されます。
各種アイコンをクリックすることで、円の詳細を編集することが可能です。
①：（ペンキの缶マーク）円の色を変更する
②：（鉛筆マーク）円のタイトルと説明を編集する
①のペンキの缶マークをクリックすると、色や枠線の太さを変更したり、透過性を調節することが可能です。
②の鉛筆マークをクリックすると、円の名前と説明を編集することが可能です。編集が終わったら「保存」を押して変更を反映します。
このように色や枠線の太さ、タイトルや説明を自由に編集して、誰にでも見やすい同心円の地図を作ることが可能です。
ここまで、中心からの距離を表す円の作り方をご説明してきました。個人使用であれば部屋探し等に役立ちますし、ビジネスであれば複数の円を作って市場調査にも活用可能です。
自分自身のホームページに埋め込む
地図の作成と設定はこれで終了です。ここからは、自分自身で作った地図を自分自身のホームページやブログに埋め込む方法をご解説します。
共有の設定をオンにする
まず最初はメニューの中の「共有」を押します。
共有設定の画面が表示されます。アクセス可能なユーザーの設定が「非公開」になっていますので、「変更」を押します。
リンクの共有方法を設定する画面になります。デフォルトではオフになっています。一番上の「オン‐ウェブ上で一般公開」にチェックを入れ、「保存」を押します。
共有設定の画面に戻ります。「アクセス可能なユーザー」が「ウェブ上で一般公開」になっていることをチェックして、「終了」を押します。
これで共有の設定は終了です。
作成した地図を印刷する
作成した地図を紙媒体に印刷しておくと、持ち運びや書き込みをするのに便利です。ここからは、作成した地図を印刷する方法をご解説します。
まず最初は「︙」を押してメニューを開きます。
メニューの一番下の「地図の印刷」を押します。
地図を印刷する方法を設定する画面が開きます。
用紙サイズは選択肢の中から自由に選ぶことが可能です。ここでは「A4」としておきます。
用紙サイズの他に、印刷の向きと出力タイプも自由に選ぶことが可能です。横向きの方が円が大きく表示される（下の画像参照）ので、向きは「横」にしておくのがお勧めです。
出力タイプはPDFと画像のどっちでも印刷には影響しませんので、どっちでも構いません。
設定が終了したら、「印刷」ボタンを押します。
「印刷」の画面が開きます。右側のプレビューをチェックして問題がなければ「印刷」を押して印刷します。
Googleマップで同心円や複数円を描くその他ツール
ここからは、「なんちゃって☆めも」以外の、Googleマップに円を描くAPIとその使用方法をご説明していきます。各APIのご説明の後にリンクを貼っておきますので、自分自身に合いそうなAPIだと思ったら是非利用してみてください。
「R1Web Service」地図上の距離計測 (円での範囲表示)
「「R1Web Service」地図上の距離計測 (円での範囲表示)」というAPIがあります。サイトの外観はこのようになっています。
円を描くには、中心となるスポットと円の半径を指定して「描画」を押します。二重の同心円を描くことも可能です。
このAPIの特徴として、円を描いた地図をボタンひとつで印刷することが可能です。地図の下にある「このページの印刷」ボタンをクリックすると作成した地図を印刷可能です。
同心円
こちらは同心円専用のAPIとなっており、簡単な操作できれいな同心円を描けるのが特徴です。
サイトを開いて下にスクロールしていくと、下の画像のような地図が設置されています。ここでは見やすくするので、地図の左下の「Full Screen」を押して表示を拡大します。もちろんフルスクリーンにしなくても同心円を描くことが可能です。
フルスクリーンモードにすると下の画像のような画面になります。左側のメニューから同心円の半径、中心としたいスポット、同心円の詳細を設定可能です。
基本的な情報として、円の半径と中心を設定します。
①：同心円の半径を設定します。カンマ","で区切ることで複数の値を設定可能です。
②：同心円の中心が表示されます。地図上の位置を直接押してピンを設置する必要があります。また、地図を動かして「中心」ボタンを押すと、表示中の地図の中心にあたる場所にピンが設置されます。
施設名や住所から中心を選択することは可能でせん。地図を押して中心を指定する必要があります。押した場所には青いピンが立ちます。
半径と中心を指定したら、「同心円を描画」を押します。下の画像のような、きれいな同心円を描くことが可能です。
同心円の塗りつぶしと枠線の有無やその色については、左側のメニューから変更することが可能です。
オアシスから５kmの半径
続いては「オアシスから5kmの範囲」というAPIをご解説します。
下の画像のようなページが開きます。機能がとてもシンプルなのが特徴で、誰にでも利用しやすい設計になっています。
使い人は簡単で、円の中心にしたい施設名あるいは住所を記入し、ドロップダウンリストで円の半径を指定して「円を描く→GO」をクリックするだけです。
下の画像のように、円を描くことが可能でした。
j STAT MAP
「jSTAT MAP」というAPIをご解説します。色々な機能がありとても便利でおもしろいサイトなのですが、ここでは地図に円を描く方法に絞ってご解説します。右下の「統計地図作成」を押します。
「エリア作成」を押します。
グループ名や円の色、塗りつぶしのパターン、枠線の色等を自由に設定可能です。
ここでは「テスト」という名前のグループで、円は青い格子柄で塗りつぶし、枠線の色は濃い青に設定しました。設定が終わったら、「次へ」を押します。
ここでは円を描きますので、上から二番目の「円」を押します。
色々な方法で円を描くことが可能です。
フリー円
「フリー円」モードは、地図の任意の場所を押して中心を指定してから、マウスを動かして円の大きさを決めることが可能です。中心との距離も画面上に表示されます。
円の大きさを決めたら「登録」を押して終了です。先ほど指定したレイアウトの円を描くことができました。
半径指定円
「半径指定円」では、円の半径をテキストボックスに記入してから、円の中心としたい場所をクリックすることで円を描きます。
最後に「登録」を押して終了です。
同心円
「同心円」では、同心円を構成する複数の円一つひとつの半径をテキストボックスに記入して、円の中心としたい場所をクリックすることで同心円を描くことが可能です。
「登録」を押して、同心円を描きます。
Googleマップで等距圏・方位線を表示する
こちらのAPIは等距圏と方位線を出しることが可能なのが特徴です。サイトを開くとこのようになります。等距線は紫、方位線は緑で表示されています。
まず最初は円の中心を指定します。画面上部のテキストボックスに施設名や住所を記入し、検索します。その地点にポップアップが表示されますので、その中の「ここを中心点にする」を押します。
中心を決めたら、次は中心と円、円と円との距離を指定します。地図の下部にあるテキストボックスに数字（単位：km）を記入し、「設定」を押します。
等距圏で1kmを指定すると、下の画像のような同心円を描くことが可能です。
はんけい
「オアシスから5kmの範囲」というAPIをご解説しましたが、これからご解説する「はんけい」もとてもシンプルで利用しやすいAPIとなっています。
使いかたは簡単で、まず最初は地図をクリック、あるいは施設名や住所を検索してピンを立てます。ピンを立てた場所が円の中心となります。
ピンを立てると、円の範囲を記入するのでのテキストボックスが表示されるので、数字（単位：km）を記入して「決定」を押します。
これだけで地図に同心円を描くことが可能です。「オアシスから5kmの範囲」との違いは、こちらは単円以外にも同心円も簡単に描けるという点です。
ここまで、Googleマップに円や同心円を描く方法をご説明してきました。とても簡単に描けて幅広い用途がありますので、是非利用してみてください。