googlemapを自分のサイトに埋め込む方法

ホームページを自分で作成するときに地図を入れますよね。

以前は自分でいろいろ苦労して地図作成ツールなんか使って画像を埋め込む人もいたとは思いますが、今はほぼいないかと。

グーグルマップ埋め込んじゃいますよね?

単純に地図を埋め込むだけならハイパー簡単です。

「今更偉そうに説明してんじゃなぇよ!」とお叱りを受けるレベルかもしれません…。

ワードプレスならプラグイン使っちゃえば余裕だったりしますから。

ま、プラグインなしでも余裕です。

今回はgoogle mapを普通に地図を埋め込むパターンと、たとえば駅から塾までの経路(線)を入れて埋め込むパターンの2種類について説明したいと思います。

私の塾は駅から遠いんであんまり使っても仕方ないんですが、駅近の塾なんかは重宝するかも。

普通に埋め込むパターン

①google mapを開いて左上のメニューをクリック。

googlemap埋め込み

②左に出てくるメニューの「地図を共有または埋め込む」をクリック。googlemap埋め込み

「地図を埋め込む」をクリック。出てくるコードをコピーする。

④自分のサイトにコピーしたコードを貼り付け。

※ワードプレスの場合は、編集画面の右上で「テキスト」編集画面でコードを張り付けてください。

こういう感じでgoogle mapの埋め込みが完了します。

カンタンですね。

googlemapに経路(線)を入れて自分のサイトに埋め込む方法

次はある二地点の経路を線で表したグーグルマップを埋め込む方法についてです。

普通に埋め込むのと比べると手間は少しだけかかります。

①先ほどと同じようにグーグルマップを開いて左上のメニューを開きます。

②左側にメニューの一覧が出てきたら、「マイプレイス」をクリック。

③上の欄から「マイマップ」を選択し、下の「地図を作成」をクリック。

④線を引きたい2つの地点を定めます。左上の方にある「スポット」のアイコンをクリック。地図上の経路を結びたい2つの地点にそれぞれスポットを置きます。今回は、「明覚駅」と「都幾川中学」の2つの地点にスポットをおきました。

⑤スポットはそれぞれ形や色を編集できます。今回は「都幾川中学校」を家のアイコンにして、色を赤にしてみます。

⑥次に左上のアイコンから「線を引く」アイコンを選びます。「徒歩ルートを追加」で徒歩による経路を作成します。ちなみに、先ほど変えた都幾川中学校のスポットが赤の家に変わっています。

⑦地図上の「明覚駅」と「都幾川中学校」のスポットアイコンをそれぞれクリック。始点を「明覚駅」にし、終点を「都幾川中学校」にして線を結びました。注意点は終点でダブルクリックをすることです。ダブルクリックをしないと経路が切れません。

経路ができたら、左の欄から「共有」をクリックしてください。

「共有」をクリックすると下のような画像が出てきます。地図タイトルに任意の名前を付けたら、「OK」ボタンをクリック。

⑨下の画面が出てきましたら、「非公開ー自分だけがアクセスできます」の右にある「変更」をクリック。

⑩リンクの共有で「ウェブ上で一般公開」にチェックして、「保存」をクリック。

⑪再びこの画面に飛びますので、下の「完了」をクリック。

⑫地図の画面に戻ったら左上のメニュー(縦に●が三つ並んでいる部分)をクリックして、「自分のサイトに埋め込む」をクリック。

⑬地図を埋め込むためのコードが出てきますので、コピーして「OK」をクリック。

⑭コピーしたコードを自分のサイトに張り付けて完了。これでgoogle mapに経路を示して自分サイトに埋め込む手順の終了です。

ということで、経路つきの地図の埋め込みが成功しました。

最寄駅から自分の塾の徒歩経路などを示したい場合には便利かもしれません。


スポンサーリンク