ワードプレスへGoogleマップ埋め込み方法とルート検索方法

こんにちは！
京香です。

この記事では、Googleマップをワードプレスに埋め込む方法と

おぼえておくと何かと便利な「ルート検索方法」について
ご紹介していきます。

と〜っても簡単ですのでさっそくやってみましょう！

Googleマップをワードプレスに埋め込む

埋め込みに必要なのは次の3つのステップだけ

STEP 1 : Googleマップで検索ポイントを表示
STEP 2 : 埋め込みコードを取得
STEP 3 : ブログにコードを貼り付ける

まずはGoogleマップを開きます。

画面左上にある検索窓に希望の地名を入力して
地図上に検索ポイントを表示。

今回は「東京駅」をえらんでみます。

「共有」をクリック

「地図を埋め込む」をクリック

貼り付ける地図のサイズをえらぶことができます。

デフォルトは「中」
サイズは　横600px 縦400px

大きすぎず小さすぎず「中」がちょうどいいかなと
個人的には思っています。

「HTMLをコピー」をクリックしてコードの取得は完了！

ワードプレスの「テキスト編集モード」画面に
先ほどコピーした埋め込みコードを貼り付けて完了です！

「ビジュアル編集」モードに戻して画面をチェックしてみると。。

こんな感じで地図がちゃんと表示されていました！

埋め込みは以上で完了です☆

ルート検索は、特にイベント記事を書く時に

「最寄り駅」から「イベント会場」
「イベント会場」から「周辺のホテル・宿」

など、

A地点からB地点までのルートを紹介するために使っていて
とても便利です。

今回は「東京駅」〜「東京ミッドタウン（六本木）」でルート検索してみます。

まずはA地点として「東京駅」を検索後
「ルート・乗り換え」をクリック

上下の矢印のアイコンをクリックすると
「出発地と目的地」が入れ替わります。

画面左上にあるアイコンで

・車
・電車
・徒歩
・自転車
・飛行機

を選択します。
今回は「車」をえらび、目的地に「東京ミッドタウン」を設定。

右側の地図に「車9分」とルートが表示されました！

この地図をブログに埋め込みたい場合は

画面一番左上にある3本横線のアイコンをクリック

「地図を共有・または埋め込む」を選択

ここから先は「Googleマップをワードプレスに埋め込む方法」の
STEP2から先と同様のステップになります☆