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

外部のAPIサービスを利用して、世界中で最も利用されている地図アプリである、Googleマップ上に同心円を描く方法をお教えします。さらには同心円を描いたGoogleマップをサイトに埋め込み、閲覧する方法を順番にご紹介していきます。

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

目次

  1. 1Googleマップで同心円を描くには?
  2. 外部のサービスを使って円が描ける!
  3. おすすめサービスは「地図に円を描く」
  4. 2Googleマップで同心円を描く方法
  5. 円の中心・半径(距離)を指定する
  6. デザインを選択する
  7. 鉛筆マークで円を描く
  8. 消しゴムマークで円を消す
  9. 複数の円を描く
  10. 同心円を描く
  11. 3Googleマップで同心円を描く時の注意点
  12. 複数の円を重ねると文字が見えなくなってしまう
  13. 作成した円は編集できない
  14. 4同心円を描いた地図をGoogleマップで埋め込み!
  15. Googleマップに地図を読み込む
  16. Googleマップで同心円を描いた地図を編集する
  17. サイトに地図を埋め込む
  18. 5Googleマップで同心円を描いてサイトに埋め込もう!

Googleマップで同心円を描くには?

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

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

コンパスの画像

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

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

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

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

Googleマップのロゴマーク

外部のサービスを使って円が描ける!

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

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

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

同心円のイメージ

おすすめサービスは「地図に円を描く」

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

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

「地図に円を描く」サービス画面

Googleマップで同心円を描く方法

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

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

「なんちゃって☆めも」と「地図に円を描く」を検索した画面

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

「地図に円を描く」サービス画面2

円の中心・半径(距離)を指定する

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

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

クリックで同心円の中心点を設定

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

任意の住所を直接入力して同心円の中心点を設定

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

「+」もしくは「−」ボタン

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

同心円の半径を設定

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

同心円の半径の単位を設定

デザインを選択する

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

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

これから描く同心円の色を設定

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

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

これから描く同心円の表示形式を選択

鉛筆マークで円を描く

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

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

鉛筆マークを選択

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

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

Googleマップの上に描いた同心円

消しゴムマークで円を消す

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

消しゴムマークを選択

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

同心円が消えたGoogleマップ

複数の円を描く

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

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

Googleマップ上の複数の円

同心円を描く

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

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

半径の異なる同心円

Googleマップで同心円を描く時の注意点

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

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

注意の表示

複数の円を重ねると文字が見えなくなってしまう

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

見えなくなった地図上の文字

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

枠線のみのデザインの同心円を併用

作成した円は編集できない

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

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

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

消しゴムマークを選択2

同心円を描いた地図をGoogleマップで埋め込み!

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

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

地図のイメージ

Googleマップに地図を読み込む

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

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

「KMLを取得する」ボタン

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

「続ける」ボタン

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

KML全てを保存

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

KMLデータをテキストエディタに保存

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

kml形式で保存

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

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

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

Googleマップの「≡」ボタン

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

Googleマップの「マイプレイス」ボタン

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

Googleマップの「地図を作成」ボタン

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

Googleマップの「インポート」ボタン

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

KMLデータがGoogleマップに埋め込みされた状態

Googleマップで同心円を描いた地図を編集する

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

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

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

同心円の編集ウィンドウ

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

同心円のスタイル編集ウィンドウ

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

編集ウィンドウの鉛筆ボタン

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

同心円の情報編集ウィンドウ

サイトに地図を埋め込む

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

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

メニューの「プレビュー」ボタン

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

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

メニューの「共有」ボタン

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

共有設定ウィンドウの「自分のサイトに埋め込む」ボタン

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

地図のソースコード

Googleマップで同心円を描いてサイトに埋め込もう!

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

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

関連するまとめ

Noimage
この記事のライター
hotpowder