こんにちは、解説ゾロです！
ブログやWebサイトにGoogleマップやGoogleストリートビューを表示できたらわかりやすいのになぁ！と感じたことはありませんか？
そうなんです！Webサイトですので、GoogleマップやGoogleストリートビューをブログに埋め込むことができたら、ブログから直接GoogleマップやGoogleストリートビューの操作ができるのです。
写真（画像）の地図をブログに表示しても、その範囲だけしか見ることができませんが、GoogleマップやGoogleストリートビューを表示すれば、広範囲が確認でき、目的地までのルート検索や距離から時間までも簡単にわかりますので、見ている方はとても行きやすくなりますので集客力にも効果的です。
以前「ワードプレスに「Googleマップ」の埋め込みを簡単に表示する方法」を解説いたしましたので、今回はよりリアルにわかる「Googleストリートビュー」の解説です。
WordPressのブログに「Googleストリートビュー」を埋め込む方法
⇩今回もGoogleマップの時と同じ「東京タワー」を例にして解説していきます。
まず、Googleマップを開いてください。そして、画面左上の検索窓に「住所」又は著明な場所なら「名称」を
①のように「東京タワー」と入力し検索しますと、
②に「東京タワー」の場所に赤いピンと、周辺のGoogleマップが表示されます。今回のストリートビューを表示する場所を東京タワーの入口当たりにしてみます。それでは、画面の右下の、
③に「黄色い人」がいます。笑！名前はペグマンといいますが、そのペグマンを左クリックを押しながらマウスで東京タワーの入り口付近まで移動するのですが、コツは、Googleマップを少し拡大しておくことと、左クリックは、ずっと押したままで操作してください。ペグマンを動かしているとペグマンの下に「〇」がフワフワして着いて来ますので「〇」の位置が見当を付けた場所になったら左クリックを押したまま人形を止めてみると「〇」が、
④のように「●」に変わり、とりあえずの位置が決まり、
⑤のように「●」の止まった位置から見たストリートビュー画像が表示されますので、その画像を確認しながらペグマンの位置を変えたりして、ストリートビューの位置を決めてください。この間ずっと左クリックを押したままです。決まりましたら、左クリックを離して下さい。⇩
ブログに「Googleストリートビュー」の埋め込みは画像を共有
⇩すると、右側に今確定した場所からのストリートビューの画像が表示されます。そして「縦三点リーダー」の、
①をクリックしますと、メニューが表示されますので、
②の「画像を共有または埋め込む」をクリックしてください。⇩
⇩画面に「共有」が表示されますので、
①の「地図を埋め込む」をクリックです。⇩
「Googleストリートビュー」の埋め込みコードをコピー
①をクリックしますとワードプレスに表示される画像の大きさを次の4つから選択できます。
- 「小」横400px 縦300px
- 「中」横600px 縦450px
- 「大」横800px 縦600px
- 「カスタムサイズ」大きさを入力
②の「HTMLをコピー」をクリックしてください。クリックしますと、
③に「クリップボードにコピーしました」が表示されます。⇩
WordPressのブログに「Googleストリートビュー」のコード貼り付け
⇩ストリートビューをコピーしましたので、今度は、ワードプレスの、
①の「投稿を編集」を開き、いつも記事を書く「ビジュアル」から、
②の「コード」（昔の「テキスト」です）をクリックします。そして、「コード」の画面に変わりますので、
③にストリートビューをコピーしたHTMLをペーストして貼り付けます。このコードの、
④の数値を変えると「幅」を変えることができます。
⑤の数値は「高さ」を変更できます。（後ほど450を350に変更しました）⇩
WordPressのブログに「Googleストリートビュー」の表示を確認
⇩それでは、ワードプレスにストリートビューが表示されているかを確認したいので「コード」から
①の「ビジュアル」をクリックしてください。「ビジュアル」の画面に戻ると、
②のように「Googleストリートビューが表示」されています。⇩
初めての人に最適！JVCケンウッド「HA-A5T-W」レビュー
「Googleストリートビュー」の高さを変更してみる
⇩大成功です・・・が、画像の高さがちょっと高いかなと気になりますので、少し低くするために、先ほどのHTMLの「height」を450から350に変更してみます。自分的にはちょうどいい高さになりました。笑⇩
2年間使い続けたマイクロソフト エルゴノミクスキーボード｜レビュー
これが本物のWordPressのブログに「Googleストリートビュー」です
上記はすべて画像で解説しましたが、本物のGoogleストリートビューを表示してみますので、いじってみてください！笑
⇩これが、本物です。東京タワーの入口ってこんなんだっけかなぁ！
昔は、親戚が遠路はるばるやってくると必ず東京タワーに連れて行って階段で登って喜んでもらったのを思い出しますが、様子がかわってしまってるようです。笑！こんな記憶も、ストリートビューがあると再確認できますので、便利です・・・よね！⇩
まとめ
自分のブログやWebサイトに天下の「Googleストリートビュー」を表示できるなんて、カッコいいです・・・よね！笑
利便性はもちろん、Googleストリートビューも無料で表示ができますので集客の強化など使い方が無限に広がります。アイディア次第で個性あるステキな内容になりそうです。
忘れないようにしたいので、著作権です。Googleマップの埋め込み記事でも解説していますが、「Googleマップ」の権利帰属表示の厳守をおすすめします。
安心して、気持ちよく便利に使うのを心がけています。
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：ワードプレスに「Googleマップ」の埋め込みを簡単に表示する方法
関連記事：Googleマップの直線距離を【iPhone】で簡単に測定する方法
関連記事：Googleドキュメントに地図チップ（スマートチップ）を挿入する3つの方法
おすすめ：プリンターヘッドのインク詰まりが直った簡単なノズル洗浄方法
