ブログの記事にお店の場所やお店までの経路などを書くときに
Googleマップを入れ込みたいときありますよね?

でも初心者の方は
「むずかしそう」「方法がわからない」など思っているかもしれません。

そこで今回は、初心者の方でも簡単にブログの記事にGoogleマップを載せる方法を詳しく解説します。

とても簡単なので安心して参考にしてください。

記事の目次(もくじ)

ブログの記事にGoogleマップを載せる方法
 場所のみを載せる方法
  1-1.手順1:Googleマップを開く
  1-2.手順2:Googleマップに表示したい場所を検索する
  1-3.手順3:地図の縮尺を調整する
  1-4.手順4:ブログ編集画面の「HTMLタグ画面」を用意する
  1-5.手順5:Googleマップの埋込み用のコードをコピーする
  1-6.手順6:ブログに埋込み用のコードを貼り付ける
  1-7.完了!

 目的地までのルートを載せる方法
  1-1.手順1:Googleマップを開く
  1-2.手順2:Googleマップに表示したい場所を検索する
  1-3.手順3:ルートを検索する
  1-4.手順4:地図の縮尺を調整する
  1-5.手順5:ブログ編集画面の「HTMLタグ画面」を用意する
  1-6.手順6:Googleマップの埋込み用のコードをコピーする
  1-7.手順7:ブログに埋込み用のコードを貼り付ける
  1-8.完了!



ブログの記事内にGoogleマップを載せる方法として2パターンあります。

 ・場所のみを載せる方法
 ・目的地までのルートを載せる方法


1つずつ紹介していきます。

場所のみを載せる方法

ブログの記事に「場所のみを載せる方法」を紹介します。

手順1:Googleマップを開く

GoogleやYahoo!などで「Googleマップ」を検索し、Googleマップを開いてください。

手順2:Googleマップに表示したい場所を検索する

Googleマップが開けたら、Googleマップ上で表示したい場所を検索してください。

スクリーンショット 2018-11-09 19.20.43

左上の赤枠で場所検索することができます。

今回は「東京駅」を検索してみましょう。
名称、住所等を入力すると表示されます。

スクリーンショット 2018-11-09 19.22.58

入力するといくつか候補が出てくるので、目的の場所を選択しましょう!

スクリーンショット 2018-11-09 19.25.37


東京駅が表示されます。
これでGoogleマップの検索は終了です!

手順3:地図の縮尺を調整する

地図の縮尺を調整する場合は、右下の「」「」ボタンで調整できます。

スクリーンショット 2018-11-09 19.27.14


」を押すと地図が大きくなり、「」を押すと地図が小さくなります。
表示したい縮尺に調整しましょう!

手順4:ブログ編集画面の「HTMLタグ画面」を用意する

ブログの記事を編集する画面上に移動し「HTMLタグ画面」を用意しましょう!
「<br />」このような文字を入力する画面です。

手順5:Googleマップの埋込み用コードをコピーする

Googleマップのサイトに戻り、埋込み用のコードをコピーします。

スクリーンショット 2018-11-09 19.34.04

Googleマップ画面、左上のメニューボタンをクリック!

スクリーンショット 2018-11-09 19.35.48

画面が表示されるので、「地図を共有または埋め込み」をクリック!

スクリーンショット 2018-11-09 19.37.26

このような画面が出てくるので、「地図を埋め込む」をクリック!

スクリーンショット 2018-11-09 19.38.31

このような画面が出てくるので、「HTMLをコピー」をクリック!
クリックするとコピー完了です。

手順6:ブログに埋込み用のコードを貼り付ける

手順4で準備していた「HTMLタグ画面」に貼り付けます

スクリーンショット 2018-11-09 19.41.58

プレビュー等で確認すると貼り付けられています。

スクリーンショット 2018-11-09 19.42.52


完成!

これで完成です。
慣れてしまえば、簡単な作業です。

お店の場所をGoogleマップで表示すると
記事自体もわかりやすくなり、見る方にとってわかりやすいです。

活用してみましょう!



目的地までのルートを載せる方法

ブログの記事に「目的地までのルートを載せる方法」を紹介します。

手順1,2,4,5,6,7は、先ほど紹介した「場所のみを載せる方法」と同じのため
写真や文字等は同じになっております。ご了承ください。

手順1:Googleマップを開く

GoogleやYahoo!などで「Googleマップ」を検索し、Googleマップを開いてください。

手順2:Googleマップに表示したい場所を検索する

Googleマップが開けたら、Googleマップ上で表示したい場所を検索してください。

スクリーンショット 2018-11-09 19.20.43

左上の赤枠で場所検索することができます。

今回は「東京駅」を検索してみましょう。
名称、住所等を入力すると表示されます。

スクリーンショット 2018-11-09 19.22.58

入力するといくつか候補が出てくるので、目的の場所を選択しましょう!

スクリーンショット 2018-11-09 19.25.37


東京駅が表示されます。
これでGoogleマップの検索は終了です!

手順3:ルートを検索する

Googleマップ上でルートの検索を行います。

スクリーンショット 2018-11-09 19.58.00

ルート・乗換」をクリック!

スクリーンショット 2018-11-09 19.59.45

出発したい場所を入力。
今回は「東京ディズニーランド」にします。
東京ディズニーランド」と入力すると、ルートが表示されます。

スクリーンショット 2018-11-09 20.03.32

移動方法は「クルマ」「電車」「徒歩」「自転車」「飛行機」が選択可能です。

これでルート検索は終了です。

ちなみに、「東京ディズニーランド → 東京駅」を徒歩で移動すると

スクリーンショット 2018-11-09 20.03.16

「2時間51分かかるんですね。

手順4:地図の縮尺を調整する

地図の縮尺を調整する場合は、右下の「」「」ボタンで調整できます。

スクリーンショット 2018-11-09 19.27.14


」を押すと地図が大きくなり、「」を押すと地図が小さくなります。
表示したい縮尺に調整しましょう!

手順5:ブログ編集画面の「HTMLタグ画面」を用意する

ブログの記事を編集する画面上に移動し「HTMLタグ画面」を用意しましょう!
「<br />」このような文字を入力する画面です。

手順6:Googleマップの埋込み用コードをコピーする

Googleマップのサイトに戻り、埋込み用のコードをコピーします。

スクリーンショット 2018-11-09 19.34.04

Googleマップ画面、左上のメニューボタンをクリック!

スクリーンショット 2018-11-09 19.35.48

画面が表示されるので、「地図を共有または埋め込み」をクリック!

スクリーンショット 2018-11-09 19.37.26

このような画面が出てくるので、「地図を埋め込む」をクリック!

スクリーンショット 2018-11-09 19.38.31

このような画面が出てくるので、「HTMLをコピー」をクリック!
クリックするとコピー完了です。

手順7:ブログに埋込み用のコードを貼り付ける

手順4で準備していた「HTMLタグ画面」に貼り付けます

スクリーンショット 2018-11-09 19.41.58

プレビュー等で確認すると貼り付けられています。

スクリーンショット 2018-11-09 19.42.52


完成!

これで完成です。
慣れてしまえば、簡単な作業です。

お店の場所までのルートをGoogleマップで表示すると
記事自体もわかりやすくなり、見る方にとってわかりやすいです。

活用してみましょう!



最後までご覧いただき、ありがとうございました。

ツイッターもやっているので、ぜひフォローしてください。