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マップに読み込むには、KMLデータをダウンロードし、それをGoogleマップにインポートする必要があります。

KMLデータを取得するには、地図の下部にある「使い方」から［KMLを取得する］というボタンをクリックします。

続いて「KML作成　確認してください」というポップアップが出るので、「続ける」をクリックします。

KMLが表示されます。［[KML]全てを選択］をクリックしてKMLを全て選択し、右クリックまたはCtrl＋Cでコピーします。

KMLをコピーしたら、テキストエディタを開いてKMLを貼り付けます。今回はメモ帳を使用します。

貼り付けたら保存します。注意点としては、「ファイルの種類」を「すべてのファイル 」に変更して、拡張子を手入力で「～～.kml」にして保存します。

保存が完了したら、KMLデータの取得は完了です。

取得したKMLデータをGoogleマップにインポートしていきます。まずはGoogleマップを開き、左上の「≡」をクリックしてメニューを開きます。

メニューの中から「マイプレイス」をクリックします。

「マイマップ」から「地図を作成」へと進みます。

「無題の地図」が作成されます。地図の名前はクリックすると自由に変更できるので、ここでは「テスト」としておきます。

これからここに先ほど取得したKMLデータを読み込んでいきます。メニューの「インポート」をクリックします。

「パソコンからファイルを選択」をクリックします。

取得したKMLデータを選択し、「開く」をクリックします。

KMLデータの読み込みが終わると、Googleマップに円が表示されます。

これでKMLデータのインポートは完了です。取り込んだ地図はGoogleドライブに自動的に保存されます。

Googleマップではレイヤの名前や円の名前を自分がわかりやすいように編集したり、円の色を変えたりすることができます。

左上のメニューの「test.kml」というところをクリックすると、レイヤ名を編集することができます。デフォルトではインポートしたKMLファイルの名前がそのままレイヤ名になっています。

名前は自由に決めることができます。任意の名前を入力したら、「保存」をクリックします。

左側のメニューに円とピンの名前が表示されています。この名前をクリックすることで、オブジェクトの詳細を編集することができます。デフォルトでは名前は全て「無題」となっています。

試しに黄色い円を編集します。メニューの中の黄色い円（無題）をクリックすると、地図上に黄色い円の詳細が表示されます。

各種アイコンをクリックすることで、円の詳細を編集することができます。
①：（ペンキの缶マーク）円の色を変更する
②：（鉛筆マーク）円のタイトルと説明を編集する

①のペンキの缶マークをクリックすると、色や枠線の太さを変更したり、透過性を調節することができます。

②の鉛筆マークをクリックすると、円の名前と説明を編集することができます。編集が終わったら「保存」をクリックして変更を反映します。

このように色や枠線の太さ、タイトルや説明を自由に編集して、誰にでも見やすい同心円の地図を作ることができます。

ここまで、中心からの距離を表す円の作り方をご紹介してきました。個人利用であれば部屋探し等に役立ちますし、ビジネスであれば複数の円を作成して市場調査にも活用できます。

地図の作成と設定はこれで完了です。ここからは、自分で作った地図を自分のホームページやブログに埋め込む方法をご紹介します。

まずはメニューの中の「共有」をクリックします。

共有設定の画面が表示されます。アクセスできるユーザーの設定が「非公開」になっていますので、「変更」をクリックします。

リンクの共有方法を設定する画面になります。デフォルトではオフになっています。一番上の「オン‐ウェブ上で一般公開」にチェックを入れ、「保存」をクリックします。

共有設定の画面に戻ります。「アクセスできるユーザー」が「ウェブ上で一般公開」になっていることを確認して、「完了」をクリックします。

これで共有の設定は完了です。

ここからは、作成した地図を実際に自分のサイトに埋め込む作業を行います。メニューから「プレビュー」をクリックします。

プレビューが表示されます。左側のメニューから「共有」をクリックします。

選択肢の一番下にある「自分のサイトに埋め込む」をクリックします。

ソースコードが表示されます。これを全て選択してコピーし、ホームページやブログに貼り付けます。

これでホームページやブログへの埋め込み作業は完了です。ソースコードをコピーしたら「OK」をクリックして閉じてしまって大丈夫です。

作成した地図を紙媒体に印刷しておくと、持ち運びや書き込みをするのに便利です。ここからは、作成した地図を印刷する方法をご紹介します。

まずは「︙」をクリックしてメニューを開きます。

メニューの一番下の「地図の印刷」をクリックします。

地図を印刷する方法を設定する画面が開きます。

用紙サイズは選択肢の中から自由に選ぶことができます。ここでは「A4」としておきます。

用紙サイズの他に、印刷の向きと出力タイプも自由に選ぶことができます。横向きの方が円が大きく表示される（下の画像参照）ので、向きは「横」にしておくのがお勧めです。

出力タイプはPDFと画像のどちらでも印刷には影響しませんので、どちらでも構いません。

設定が完了したら、「印刷」ボタンをクリックします。

「印刷」の画面が開きます。右側のプレビューを確認して問題がなければ「印刷」をクリックして印刷します。

ここからは、「なんちゃって☆めも」以外の、Googleマップに円を描くAPIとその使い方をご紹介していきます。各APIのご説明の後にリンクを貼っておきますので、自分に合いそうなAPIだと思ったら是非使ってみてください。

「【R1Web Service】地図上の距離計測 (円での範囲表示)」というAPIがあります。サイトの外観はこのようになっています。

円を描くには、中心となるスポットと円の半径を指定して「描画」をクリックします。二重の同心円を描くこともできます。

このAPIの特徴として、円を描いた地図をボタンひとつで印刷することができます。地図の下にある「このページの印刷」ボタンをクリックすると作成した地図を印刷できます。

こちらは同心円専用のAPIとなっており、簡単な操作できれいな同心円を描けるのが特徴です。

サイトを開いて下にスクロールしていくと、下の画像のような地図が設置されています。今回は見やすくするため、地図の左下の「Full Screen」をクリックして表示を拡大します。もちろんフルスクリーンにしなくても同心円を描くことができます。

フルスクリーンモードにすると下の画像のような画面になります。左側のメニューから同心円の半径、中心としたいスポット、同心円の詳細を設定できます。

基本的な情報として、円の半径と中心を設定します。

①：同心円の半径を設定します。カンマ","で区切ることで複数の値を設定できます。
②：同心円の中心が表示されます。地図上の位置を直接クリックしてピンを設置する必要があります。また、地図を動かして「中心」ボタンを押すと、表示中の地図の中心にあたる場所にピンが設置されます。

施設名や住所から中心を選択することはできません。地図をクリックして中心を指定する必要があります。クリックした場所には青いピンが立ちます。

半径と中心を指定したら、「同心円を描画」をクリックします。下の画像のような、きれいな同心円を描くことができます。

同心円の塗りつぶしと枠線の有無やその色については、左側のメニューから変更することができます。

続いては「オアシスから5kmの範囲」というAPIをご紹介します。

下の画像のようなページが開きます。機能が非常にシンプルなのが特徴で、誰にでも使いやすい設計になっています。

使い方は簡単で、円の中心にしたい施設名あるいは住所を入力し、ドロップダウンリストで円の半径を指定して「円を描く→GO」をクリックするだけです。

下の画像のように、円を描くことができました。

「jSTAT MAP」というAPIをご紹介します。様々な機能があり非常に便利でおもしろいサイトなのですが、今回は地図に円を描く方法に絞ってご紹介します。右下の「統計地図作成」をクリックします。

「エリア作成」をクリックします。

グループ名や円の色、塗りつぶしのパターン、枠線の色等を自由に設定できます。

今回は「テスト」という名前のグループで、円は青い格子柄で塗りつぶし、枠線の色は濃い青に設定しました。設定が終わったら、「次へ」をクリックします。

今回は円を描きますので、上から二番目の「円」をクリックします。

様々な方法で円を描くことができます。

「フリー円」モードは、地図の任意の場所をクリックして中心を指定してから、マウスを動かして円の大きさを決めることができます。中心との距離も画面上に表示されます。

円の大きさを決めたら「登録」をクリックして完了です。先ほど指定したレイアウトの円を描くことができました。

「半径指定円」では、円の半径をテキストボックスに入力してから、円の中心としたい場所をクリックすることで円を描きます。

最後に「登録」をクリックして完了です。

「同心円」では、同心円を構成する複数の円一つひとつの半径をテキストボックスに入力して、円の中心としたい場所をクリックすることで同心円を描くことができます。
 

「登録」をクリックして、同心円を描きます。

こちらのAPIは等距圏と方位線を表示させることができるのが特徴です。サイトを開くとこのようになります。等距線は紫、方位線は緑で表示されています。

まずは円の中心を指定します。画面上部のテキストボックスに施設名や住所を入力し、検索します。その地点にポップアップが表示されますので、その中の「ここを中心点にする」をクリックします。

中心を決めたら、次は中心と円、円と円との距離を指定します。地図の下部にあるテキストボックスに数字（単位：km）を入力し、「設定」をクリックします。

等距圏で1kmを指定すると、下の画像のような同心円を描くことができます。

「オアシスから5kmの範囲」というAPIをご紹介しましたが、これからご紹介する「はんけい」も非常にシンプルで使いやすいAPIとなっています。

使い方は簡単で、まずは地図をクリック、あるいは施設名や住所を検索してピンを立てます。ピンを立てた場所が円の中心となります。

ピンを立てると、円の範囲を入力するためのテキストボックスが表示されるので、数字（単位：km）を入力して「決定」をクリックします。

これだけで地図に同心円を描くことができます。「オアシスから5kmの範囲」との違いは、こちらは単円だけでなく同心円も簡単に描けるという点です。

ここまで、Googleマップに円や同心円を描く方法をご紹介してきました。とても簡単に描けて幅広い用途がありますので、是非活用してみてください。