杏

Googleマップ、ストリートビューをブログに埋め込みたいけど、
そうやったらいいのか分からない人に向けて、ブログへ埋め込む方法を
分かりやすく解説していきます。


まなみ

マップが掲載されてるサイトよく見かえるけど、
あれ、埋め込んでるんだ?

話題のスポットやお店などの情報を得る時に
よく使うのがGoogleマップですよね。

便利なGoogleマップを使って、

ブログやホームページに埋め込むことで
詳しく場所を説明することができます。

ジャンルによっては、
使う頻度も多くなると思うので
参考にしていただけたらと思います。

この記事のポイント
  • Googleマップをブログに埋め込む方法
  • ストリートビュー画像の埋め込み方法

ワードプレスに、

Googleマップとストリートビュー画像を埋め込む
簡単なやり方となります。

Googleマップをブログに埋め込みするやり方

文章で説明するよりもGoogleマップを使うことで
読者により伝わりやすくなるメリットがあります。

ぜひ、利用してみてはいかがでしょうか。

Googleマップを使うメリット

ブログに画像で作成したマップを作製するよりも、

Googleマップを埋め込んだほうが
スマートフォンに適してるメリットがあります。

また、

Googleマップは詳しく見たい場所や、
周辺の建物などを確認するために地図をズームしたり、
スクロールをすることができるので読者にとっても分かりやすくなります。

ストリートビュー画像を使うメリット

ストリートビュー画像を活用することで、
目的地周辺、または経路を確認することができます。

ブログ読者にもわかりやすく
場所の状況や雰囲気を伝えることが
メリットとなります。

Googleマップ、ブログの埋め込み方法

Googleマップを開いて、住所を検索します。

左上(赤枠部分)をクリックをすると下記の画面に変わります。

マップに検索した住所が表示されたら、左側にある「地図を共有または埋め込む」をクリックします。

Google Mapは、こちら

施設住所を検索して、

場所が出てきたら左側上(メニュー)をクリックすると
一覧が出てきます。

赤枠部分、地図を共有または埋め込むをクリック。

赤枠部分、「地図を埋め込む」をクリック。

赤枠部分「HTMLをコピー」をクリックしたら、

ワードプレスに戻りテキストを選択して、
先ほどのHTMLのコピーを貼り付けます(グレー部分)。

これで、Googleマップがブログに表示されるようになります。

ブログで見るGoogleマップ


このような感じでブログに表示されます。

ストリートビュー画像をブログに埋め込む方法

Googleマップを開いて、住所を検索します。

右側の画面、真ん中あたりに「画像」と

「ストリートビューと360゜ビュー」(赤枠)が出てくるので

ストリートビューと360゜ビューをクリックします。

または、

他の方法として、マップ画面右下の「人アイコン」(赤枠)を、

マウスを使い検索住所した場所に、

ドラックしながら移動させてストリートビューを開きます。

ストリートビューが表示されたら、

下記の(赤枠部分)をクリックし、

「画像を共有または埋め込む」をクリックします。

このような画面が表示されますので、

「地図を埋め込む」(赤枠)クリックします。

ストリートビューが表示され、HTMLをコピー(赤枠)をクリックして、

ワードプレスに戻りテキストを選択して、先ほどのHTMLコピーを貼り付けます。

これでストリートビュー画像がブログに表示されます。

ブログで見るストリートビュー


このような感じにブログに表示されます。

まとめ

今回は、Googleマップとストリートビュー画像をブログに埋め込む方法を、
わかりやすく解説させていただきました。

Googleマップ、ストリートビュー画像など便利な機能を使えば、
ブログでの解説もユーザーにわかりやすくなります。

人気スポットや施設などの紹介に、
簡単にできるGoogleサービスを利用してみて下さい。

インスタグラム、twitterをブログに埋め込む方法も
参考にしてみて下さい。


杏

トレンドブログでのショップの紹介、ホームページで場所の詳細などに使うと便利です。
画像も取り入れられるので、マップだけではわかりにくい、周辺の雰囲気を伝えることもできる機能となっています。
私は、トレンドブログのショップ詳細によく使っています。