杏

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をブログに埋め込む方法も参考にしてみて下さい。


杏

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