漫画の地球儀

『Googleマップ』に同心円、複数の円を描きホームページに埋め込む方法!【サイト、二重、ピン】

スポンサーリンク

Googleマップで同心円を描く方法『地図に円を描く』

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

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

「地図に円を描く」を開く

f:id:rick1208:20200722145325p:plain
地図上に同心円を描くことが可能なAPIはいくつかありますが、最も簡単で利用しやすいのは「なんちゃって☆めも」が提供している「地図に円を描く」というサービスです。

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

中心からの距離を表す円を描く

f:id:rick1208:20200722145431p:plain
中心からの距離を表す円を描く方法を説明していきます。

地図上に円を描くためには、何よりもまず円の中心となるスポットを指定する必要があります。右上の検索ボックスにスポットの名前を記入し、「Go!」を押します。
f:id:rick1208:20200722225136p:plain
例えば「新橋駅」を中心とした円を出しる場合は、新橋駅と記入して「Go!」を押します。
f:id:rick1208:20200722225258p:plain
上の画像のように、新橋駅に自動でピンが表示されました。このピンが、これから描く円の中心となります。中心を決めたら、続いては「円の半径」、すなわち中心からの距離を指定します。
f:id:rick1208:20200722225305p:plain
上のテキストボックスに任意の数字を記入します。下のドロップダウンリストは単位を選択することが可能です。新橋駅からの距離1、5kmの範囲を知りたい場合は、半径1、5kmの円を描画します。円の半径を記入するテキストボックスには「1、5」と記入し、単位は「km」を指定します。
f:id:rick1208:20200722225320p:plain
これで円の中心地と半径は決まりました。ここからは円のデザインを決めていきます。

円のデザインを指定する

「円の色」で、円の色を自由に選択することが可能です。選択する方法は簡単で、選びたい色の「〇」を押してチェックを入れるだけです。デフォルトで赤が選択されていますので、ここではこのまま赤い円を描きます。
f:id:rick1208:20200722225709p:plain
続いて、「動作」で円のレイアウトを選びます。
f:id:rick1208:20200722225719p:plain
レイアウトは、下記の三パターンから選ぶことが可能です。
①:円の中を塗りつぶす
②:円の枠線のみ描画する
③:選んだピンの近くに任意のテキストを表示する(円は描画しない)
f:id:rick1208:20200722225815p:plain
ここでは範囲を塗りつぶす円を描きます。上の画像の①のところにチェックをつけます。

円を描く

これで円を描く用意は終了しました。これから実ときに地図上に円を描いていきます。まず最初は左上の「操作」を設定します。
f:id:rick1208:20200722225905p:plain
「操作」では、円やピンを新しく作成・追加するか、描いた円やピンを消去するかを選びます。
①:(鉛筆マーク)円やピンを描く
②:(消しゴムマーク)地図上に出した円やピンを消去する
f:id:rick1208:20200722225912p:plain
ここではまず新しい円を描画しますので、①にチェックを入れます。

これで円を描くための設定は終了です。ここまで来れば、円を描くのはとても簡単です。地図上に表示されている、円の中心にしたいピンをクリックするだけです。
f:id:rick1208:20200723054933p:plain
ピンをクリックすると、このようになります。
f:id:rick1208:20200723054941p:plain
新橋駅から半径1、5km範囲の赤い円が表示されました。このままだと縮尺が大きいので、円の範囲のあたりを拡大してみます。拡大・縮小はマウスのスクロールバーなどではできないので、画面右下の「+」、「-」で行います。
f:id:rick1208:20200723054949p:plain
拡大するとこのように見えます。
f:id:rick1208:20200723055002p:plain
円は透過性があります。新橋駅から1、5kmの距離はどうなっているのか、視覚的に理解することが可能なようになりました。

上記の作業を繰り返すことで、複数の円を描くことも可能です。
f:id:rick1208:20200723055012p:plain

円やピンを消去する

f:id:rick1208:20200722102009p:plain
地図上に描いた円やピンを消去するには、まず「操作」のところで消しゴムマークにチェックを入れます。
f:id:rick1208:20200723055452p:plain
消しゴムマークにチェックを入れたら、消去したい円やピンをクリックするだけです。円を消去する場合は、円のどの部分を押しても構いません。
f:id:rick1208:20200723055459p:plain
ピンを消す場合も同様に、「操作」で消しゴムマークを選び、ピンをクリックするだけです。
f:id:rick1208:20200723055508p:plain
ピンが消えました。

同心円を描く

f:id:rick1208:20200721155658p:plain
これまでは一つの円を描く方法をご解説しましたが、Googleマップに同心円を描くことも可能です。ここからは、同心円を描く方法をご解説します。

二重の同心円を描く

同心円を描く方法はごく簡単で、半径の異なる複数の円を重ねて描くだけです。先ほどと同じく「円の半径」と「円の色」を指定し、中心にしたいピン(ここでは新橋駅)を押します。ここでは、「新橋駅から半径2km範囲の赤い塗りつぶし円」を描く設定にしました。
f:id:rick1208:20200723055547p:plain
あとは「操作」で鉛筆マークを選び、新橋駅のピンをクリックするだけです。このようになります。
f:id:rick1208:20200723055554p:plain
上の画像のように、新橋駅から1、5km範囲の円の上に、2km範囲の円が表示されました。円が重なっているところは色が濃くなっているので、1、5km範囲、1、5km~2km範囲、2km範囲の外側を明確に区別することが可能です。
f:id:rick1208:20200723055603p:plain

複数の円を重ねて同心円を描くときの気を付ける点

f:id:rick1208:20200721072156p:plain
同心円を活用することで異なる二点間の距離をより正確に把握することが可能です。

一方、透過性のある二つの円を重ねると、中の円の色が濃くなり、地図上に表記されている文字が見えにくくなる場合があります。特に三重以上の円になると中の円の境界や範囲、地図上の表記がかなり見にくくなります。
f:id:rick1208:20200723055900p:plain
この場合は、外側の円の色を変えるなどの工夫をすると、見やすさを保ちながら同心円を出しることが可能です。例えば「円の色」で、外側の円の色を黄色に設定します。
f:id:rick1208:20200723055907p:plain
同じ三重円でも、それぞれの円の境界がはっきりし、かなり見やすくなりました。

また、円の色を変える以外にも、外側の円を外枠のみ出しるという方法もあります。方法は、「動作」のところで円の外枠の線のみ描画する設定にチェックを入れ、中心となるピンを押します。
f:id:rick1208:20200723055915p:plain
尚、一旦描いた円の色を変えたり外枠表示だけにすることは可能でせん。円を編集したい場合は、編集したい対象の円を一旦消去し、円の色・半径・動作を設定し直してから改めて円を描く必要があります。

円の中心となるピンを手動で配置する

f:id:rick1208:20200721072053p:plain
ここまでは例として新橋駅を中心とした円を描く方法を見てきました。駅や利便施設は地図上で検索が可能なので、左上の「地名で移動」を使うと簡単且つ正確に円の中心として指定することが可能です。
f:id:rick1208:20200723060321p:plain
しかし、自宅などを中心とした円を描きたい場合は、「地名で移動」が使えません。このようなパターンでは、地図上の任意の位置を押してピンを立て、そこを中心に円を描くことが可能です。クリックする前に、「操作」で鉛筆マークにチェックを入れておきます。
f:id:rick1208:20200723060307p:plain
このように、任意の場所を押してピンを立て、そこを中心とした円を描くことが可能です。
f:id:rick1208:20200723060335p:plain


Googleマップで同心円をホームページに埋め込む方法
f:id:rick1208:20200720192436p:plain
ここまでは、「地図に円を描く」というサービス上で円を描く方法をご解説しました。ここからは、作成した円をGoogleマップにインポートしたり、自分自身のホームページに埋め込む方法をご解説します。

Googleマップに読み込む

f:id:rick1208:20200720190319p:plain
円を出した地図をGoogleマップに読み込むには、KMLデータをダウンロードし、それをGoogleマップにインポートする必要があります。

KMLデータを取得する

KMLデータを取得するには、地図の下部にある「使用方法」から「KMLを取得する」というボタンを押します。
f:id:rick1208:20200723095509p:plain
続いて「KML作成 チェックしてください」というポップアップが出るので、「続ける」を押します。
f:id:rick1208:20200723100014p:plain
KMLが表示されます。「「KML」全部を選択」を押してKMLを全部選び、右クリックあるいはCtrl+Cでコピーします。
f:id:rick1208:20200723100022p:plain
KMLをコピーしたら、テキストエディタを開いてKMLをペーストます。ここではメモ帳を使用します。
f:id:rick1208:20200723100033p:plain
ペーストたら保存します。気を付ける点としては、「ファイルの種類」を「すべてのファイル 」に変更して、拡張子を手記入で「~~、kml」にして保存します。
f:id:rick1208:20200723100040p:plain
保存が終了したら、KMLデータの取得は終了です。

KMLデータをGoogleマップにインポートする

取得したKMLデータをGoogleマップにインポートしていきます。まず最初はGoogleマップを開き、左上の「≡」を押してメニューを開きます。
f:id:rick1208:20200723100056p:plain
メニューの中から「マイプレイス」を押します。
f:id:rick1208:20200723100102p:plain
「マイマップ」から「地図を作成」へと進みます。
f:id:rick1208:20200723100108p:plain
「無題の地図」が作成されます。地図の名前はクリックすると自由に変更可能なので、ここでは「テスト」としておきます。

これからここに先ほど取得したKMLデータを読み込んでいきます。メニューの「インポート」を押します。
f:id:rick1208:20200723100116p:plain
「パソコンからファイルを選択」を押します。
f:id:rick1208:20200723100123p:plain
取得したKMLデータを選び、「開く」を押します。
f:id:rick1208:20200723100130p:plain
KMLデータの読み込みが終わると、Googleマップに円が表示されます。
f:id:rick1208:20200723100140p:plain
これでKMLデータのインポートは終了です。取り込んだ地図はGoogleドライブに自動的に保存されます。

Googleマップ上で円の詳細を編集する

f:id:rick1208:20200720152327p:plain
Googleマップではレイヤの名前や円の名前を自分自身がわかりやすいように編集したり、円の色を変えたりすることが可能です。

レイヤの名前を編集する

左上のメニューの「test、kml」というところをクリックすると、レイヤ名を編集することが可能です。デフォルトではインポートしたKMLファイルの名前がそのままレイヤ名になっています。
f:id:rick1208:20200723100220p:plain
名前は自由に決めることが可能です。任意の名前を記入したら、「保存」を押します。
f:id:rick1208:20200723101057p:plain

円の名前やレイアウトを編集する

左側のメニューに円とピンの名前が表示されています。この名前をクリックすることで、オブジェクトの詳細を編集することが可能です。デフォルトでは名前は全部「無題」となっています。
f:id:rick1208:20200723101110p:plain
試しに黄色い円を編集します。メニューの中の黄色い円(無題)をクリックすると、地図上に黄色い円の詳細が表示されます。
f:id:rick1208:20200723101116p:plain
各種アイコンをクリックすることで、円の詳細を編集することが可能です。
①:(ペンキの缶マーク)円の色を変更する
②:(鉛筆マーク)円のタイトルと説明を編集する
f:id:rick1208:20200723101123p:plain
①のペンキの缶マークをクリックすると、色や枠線の太さを変更したり、透過性を調節することが可能です。
f:id:rick1208:20200723101130p:plain
②の鉛筆マークをクリックすると、円の名前と説明を編集することが可能です。編集が終わったら「保存」を押して変更を反映します。
f:id:rick1208:20200723101136p:plain
このように色や枠線の太さ、タイトルや説明を自由に編集して、誰にでも見やすい同心円の地図を作ることが可能です。

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

自分自身のホームページに埋め込む

f:id:rick1208:20200720152312p:plain
地図の作成と設定はこれで終了です。ここからは、自分自身で作った地図を自分自身のホームページやブログに埋め込む方法をご解説します。

共有の設定をオンにする

まず最初はメニューの中の「共有」を押します。
f:id:rick1208:20200723101446p:plain
共有設定の画面が表示されます。アクセス可能なユーザーの設定が「非公開」になっていますので、「変更」を押します。
f:id:rick1208:20200723101452p:plain
リンクの共有方法を設定する画面になります。デフォルトではオフになっています。一番上の「オン‐ウェブ上で一般公開」にチェックを入れ、「保存」を押します。
f:id:rick1208:20200723101500p:plain
共有設定の画面に戻ります。「アクセス可能なユーザー」が「ウェブ上で一般公開」になっていることをチェックして、「終了」を押します。
f:id:rick1208:20200723101506p:plain
これで共有の設定は終了です。

ソースコードを埋め込む

ここからは、作成した地図を実ときに自分自身のサイトに埋め込む作業を行います。メニューから「プレビュー」を押します。
f:id:rick1208:20200723101522p:plain
プレビューが表示されます。左側のメニューから「共有」を押します。
f:id:rick1208:20200723101528p:plain
選択肢の一番下にある「自分自身のサイトに埋め込む」を押します。
f:id:rick1208:20200723101535p:plain
ソースコードが表示されます。これを全部選びてコピーし、ホームページやブログにペーストます。
f:id:rick1208:20200723101541p:plain
これでホームページやブログへの埋め込み作業は終了です。ソースコードをコピーしたら「OK」を押して閉じてしまって大丈夫です。

作成した地図を印刷する

f:id:rick1208:20200720134720p:plain
作成した地図を紙媒体に印刷しておくと、持ち運びや書き込みをするのに便利です。ここからは、作成した地図を印刷する方法をご解説します。

まず最初は「︙」を押してメニューを開きます。
f:id:rick1208:20200723101607p:plain
メニューの一番下の「地図の印刷」を押します。
f:id:rick1208:20200723101614p:plain
地図を印刷する方法を設定する画面が開きます。
f:id:rick1208:20200723101623p:plain
用紙サイズは選択肢の中から自由に選ぶことが可能です。ここでは「A4」としておきます。
f:id:rick1208:20200723101629p:plain
用紙サイズの他に、印刷の向きと出力タイプも自由に選ぶことが可能です。横向きの方が円が大きく表示される(下の画像参照)ので、向きは「横」にしておくのがお勧めです。
f:id:rick1208:20200723101638p:plain
出力タイプはPDFと画像のどっちでも印刷には影響しませんので、どっちでも構いません。

設定が終了したら、「印刷」ボタンを押します。
f:id:rick1208:20200723101644p:plain
「印刷」の画面が開きます。右側のプレビューをチェックして問題がなければ「印刷」を押して印刷します。
f:id:rick1208:20200723101818p:plain

Googleマップで同心円や複数円を描くその他ツール

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

「R1Web Service」地図上の距離計測 (円での範囲表示)

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

円を描くには、中心となるスポットと円の半径を指定して「描画」を押します。二重の同心円を描くことも可能です。
f:id:rick1208:20200723101855p:plain
このAPIの特徴として、円を描いた地図をボタンひとつで印刷することが可能です。地図の下にある「このページの印刷」ボタンをクリックすると作成した地図を印刷可能です。
f:id:rick1208:20200723101904p:plain

同心円

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

サイトを開いて下にスクロールしていくと、下の画像のような地図が設置されています。ここでは見やすくするので、地図の左下の「Full Screen」を押して表示を拡大します。もちろんフルスクリーンにしなくても同心円を描くことが可能です。
f:id:rick1208:20200723101932p:plain
フルスクリーンモードにすると下の画像のような画面になります。左側のメニューから同心円の半径、中心としたいスポット、同心円の詳細を設定可能です。
f:id:rick1208:20200723102941p:plain
基本的な情報として、円の半径と中心を設定します。

①:同心円の半径を設定します。カンマ","で区切ることで複数の値を設定可能です。
②:同心円の中心が表示されます。地図上の位置を直接押してピンを設置する必要があります。また、地図を動かして「中心」ボタンを押すと、表示中の地図の中心にあたる場所にピンが設置されます。
f:id:rick1208:20200723102959p:plain
施設名や住所から中心を選択することは可能でせん。地図を押して中心を指定する必要があります。押した場所には青いピンが立ちます。
f:id:rick1208:20200723103008p:plain
半径と中心を指定したら、「同心円を描画」を押します。下の画像のような、きれいな同心円を描くことが可能です。
f:id:rick1208:20200723103014p:plain
同心円の塗りつぶしと枠線の有無やその色については、左側のメニューから変更することが可能です。

オアシスから5kmの半径

f:id:rick1208:20200720085652p:plain
続いては「オアシスから5kmの範囲」というAPIをご解説します。

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

使い人は簡単で、円の中心にしたい施設名あるいは住所を記入し、ドロップダウンリストで円の半径を指定して「円を描く→GO」をクリックするだけです。
f:id:rick1208:20200723103812p:plain
下の画像のように、円を描くことが可能でした。

f:id:rick1208:20200723103821p:plain

j STAT MAP

f:id:rick1208:20200718093803p:plain
「jSTAT MAP」というAPIをご解説します。色々な機能がありとても便利でおもしろいサイトなのですが、ここでは地図に円を描く方法に絞ってご解説します。右下の「統計地図作成」を押します。
f:id:rick1208:20200723103857p:plain
「エリア作成」を押します。
f:id:rick1208:20200723103904p:plain
グループ名や円の色、塗りつぶしのパターン、枠線の色等を自由に設定可能です。
f:id:rick1208:20200723103917p:plain
ここでは「テスト」という名前のグループで、円は青い格子柄で塗りつぶし、枠線の色は濃い青に設定しました。設定が終わったら、「次へ」を押します。
f:id:rick1208:20200723103925p:plain
ここでは円を描きますので、上から二番目の「円」を押します。
f:id:rick1208:20200723103935p:plain
色々な方法で円を描くことが可能です。

フリー円

「フリー円」モードは、地図の任意の場所を押して中心を指定してから、マウスを動かして円の大きさを決めることが可能です。中心との距離も画面上に表示されます。
f:id:rick1208:20200723104010p:plain
円の大きさを決めたら「登録」を押して終了です。先ほど指定したレイアウトの円を描くことができました。
f:id:rick1208:20200723104020p:plain

半径指定円

「半径指定円」では、円の半径をテキストボックスに記入してから、円の中心としたい場所をクリックすることで円を描きます。
f:id:rick1208:20200723104047p:plain
最後に「登録」を押して終了です。
f:id:rick1208:20200723104055p:plain

同心円

「同心円」では、同心円を構成する複数の円一つひとつの半径をテキストボックスに記入して、円の中心としたい場所をクリックすることで同心円を描くことが可能です。
f:id:rick1208:20200723104211p:plain

「登録」を押して、同心円を描きます。
f:id:rick1208:20200723104220p:plain

Googleマップで等距圏・方位線を表示する

f:id:rick1208:20200718045752p:plain
こちらのAPIは等距圏と方位線を出しることが可能なのが特徴です。サイトを開くとこのようになります。等距線は紫、方位線は緑で表示されています。
f:id:rick1208:20200723104249p:plain
まず最初は円の中心を指定します。画面上部のテキストボックスに施設名や住所を記入し、検索します。その地点にポップアップが表示されますので、その中の「ここを中心点にする」を押します。
f:id:rick1208:20200723104256p:plain
中心を決めたら、次は中心と円、円と円との距離を指定します。地図の下部にあるテキストボックスに数字(単位:km)を記入し、「設定」を押します。
f:id:rick1208:20200723104303p:plain
等距圏で1kmを指定すると、下の画像のような同心円を描くことが可能です。
f:id:rick1208:20200723104316p:plain

はんけい

f:id:rick1208:20200717164727p:plain
「オアシスから5kmの範囲」というAPIをご解説しましたが、これからご解説する「はんけい」もとてもシンプルで利用しやすいAPIとなっています。

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

ピンを立てると、円の範囲を記入するのでのテキストボックスが表示されるので、数字(単位:km)を記入して「決定」を押します。
f:id:rick1208:20200723104355p:plain
これだけで地図に同心円を描くことが可能です。「オアシスから5kmの範囲」との違いは、こちらは単円以外にも同心円も簡単に描けるという点です。
f:id:rick1208:20200723104406p:plain
ここまで、Googleマップに円や同心円を描く方法をご説明してきました。とても簡単に描けて幅広い用途がありますので、是非利用してみてください。