Googleマップに円を描いてホームページやブログに設置する方法(動画有)

グーグルマップで半径、○キロメートルが圏内ですよ。とか、半径○キロメートルまでが交通費**円になります。など分かりやすく説明する為の円を描きたい!!思ったことはありませんか?

そんなあなたの為に、簡単でHTMLやjavascript、PHPなどの知識が無くても設置できる方法を紹介していきたいと思います。

サービスを使って、好みの大きさの円を描く

地図上に好きな半径の円を描けます (Google Maps API V3版)というサービスを利用し、円を描いていきます。今回は中心点よりAkm、Bkm、Ckmの円を地図上に描きたいと思います。

下記に動画でも説明しますが、このような手順で円を描いていきます。
動画での解説を先に見る!

円を描く手順

1.
地名もしくは住所等で「Go!」をクリックし検索をします。
下記は例として、静岡駅にしました。

2.
操作の部分では円を描くので、エンピツアイコンの方にチェックが入っていることを確認します。
消しゴムのアイコンは文字通り、描いた円を削除する時に使います。

3.
円の色では、好きな色を選びます。

4.
円の半径を記入します。2段に分かれていて、上段には数字(半角)を記入します。下段には、km、m、マイル、海里から距離の単位を選択します。

5.
動作は、円の書き方を選択します。「
円を塗りつぶして描くもの」「円の縁だけを描くもの」「マーカーを左上としたラベルを描画」の3つから選びます。

 

円の色や半径、動作等を決めたら、検索した時に表示したピンをクリックします。
すると、設定した条件の円が地図上に描かれます。

 

次に、円の半径を10km(先程と違う数値)を入力し、円の色を決め、同じくピンをクリックすると、2つ目の円が描かれます。

 

作った円を消す時は、操作の欄にある消しゴムアイコンを選択し円の色部分をクリックします。(下記では、黄色部分)

 

クリックした色の円を消すことができます。

 

KMLデータを取得する

地図の下部にある、「使い方」の中にあるKMLを取得する。をクリックします。

 

すると、KML作成 確認してくださいという画面が表示するので、「続ける」ボタンをクリックします。

 

テキストエディタを開き貼り付けて、.kmlの拡張子で保存します。

GoogleマップにKMLデータを追加する

Googleマップ https://www.google.co.jp/maps/

 

googleマップ左上にあるメニューをクリックします。

 

表示されたメニュー内の「マイプレイス」をクリックします。

 

マイマップをクリックし、下部にある地図を作成をクリックします。

 

インポートをクリックします。

 

パソコンから先程作成した、****.kml ファイルを選択してアップロードします。

 

正常にアップロードが完了すると、先程作成した円が地図上に表示されます。

 

地図の名前や、円の名前を設置することができるので、左メニューにある項目名をクリックします。

ここでは、googlel.kmlや無題という部分の名前を変更することができます。

 

円の設定を行います。
左のメニュー内にある無題となっている部分をクリックします。(例:黄色の円の設定を変更します)

すると、地図内に設定の窓が表示されます。
ここで、円の色(バケツのアイコン)や円の名前(エンピツのアイコン)をクリックすることで情報を編集します。

 

バケツのアイコンをクリック
色を変更したり、円の透明度を変更することができます。

 

エンピツのアイコンをクリック
円のタイトルと、説明を記載します。

作成した円の数だけ、色や名前の変更を行います。

ホームページに地図を設置する

地図の設定は完了したので、ホームページやブログなどに地図を設置する方法です。

メニュー内にある共有ボタンをクリックします。

 

共有設定画面が表示されるので、下の画像にあるように、変更ボタンをクリックして、誰でも閲覧できるようにします。

 

リンクの共有画面では、
1つめのオンをクリック(ウェブ上で一般公開)し、保存ボタンをクリックします。

 

共有設定の画面に戻るので、そのまま完了ボタンをクリックします。

 

プレビューをクリックします。

 

プレビュー画面にある共有ボタンをクリックします。

 

出てきたメニューの一番下にある自分のサイトに埋め込むをクリックします。

 

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

 

実際にソースコードを貼り付けたもの

ということで、下記マップが実際にソースコードを貼り付けたgoogleマップ上に円を描いた地図になります。

[動画] googleマップに円を描く方法を見る

まとめ

googleマップに半径の距離を示した円を描く方法を説明しました。工程は多めですが、やっていることはとても単純ですね。とても簡単に作れるので、是非試していただければと思います。

用途としては、会社の場所から半径○○kmは交通費○○円と表示したり、活動範囲はこのあたりです。と表示することで、ユーザーに分かりやすい地図になりますね。

ホームページの売上がなかなか伸びない。

どうしたら売れるホームページになるのか分からない。

そのようにお考えのあなたに、是非読んでいただきたい!

15年間のノウハウと実績から得たホームページ改善ポイントをまとめました!

超オトクな特典付き!!!

無料ダウンロードはコチラ
売上アップ間違いなし!34個の改善ポイント