記事の中にGoogleMapストリートビューを埋め込む方法

ブログを運営する中で調べたこと・やってみたことシリーズ
今回は「記事の中にGoogleMapのストリートビューを埋め込たい」というもの。

Cocoonで記事を書いていて、

と思ってやり方を調べたので、実施手順についてまとめました。
※PCでの作業想定です。
※Cocoonは、バージョン：1.1.2で手順実施しています。

やりたいこと

今回やりたいことは

　指定の場所のGoogleMapのストリートビューを記事に埋め込む

特定の一点からの視点のみ表示させたい場合は、スクリーンショットの画像で十分だと思いますが、周囲の様子を含めて表示したい場合は、ストリートビューで表示するとわかりやすいと思います。

　・ストリートビューでユーザーが視界を自由に変更できるようにしたい
　・ストリートビューからGoogleMapの地図を開けるようにしたい
というときに便利な方法です。

それでは、ストリートビューを埋め込むために準備するものとのその方法です。

GoogleMapのストリートビューを記事の中に埋め込む方法

GoogleMapのストリートビューを記事の中に埋め込む方法です。

今回のデモ例では、上の画像↑↑のように、名古屋城の近くの金シャチ横町周辺のストリートビューを埋め込みます。

手順

手順は、
　GoogleMapのストリートビューで場所検索→ストリートビューのHTMLを発行・コピー→WordPressの記事に埋め込む
という流れです。

GoogleMapのストリートビューで場所を検索

GoogleMapのストリートビューで表示したい場所を検索します。だいたいの場所をGoogleMapで検索して、ストリートビューの表示に切り替えると検索しやすいと思います。

ストリートビューが表示されたら、記事に表示したい場所を探します。見つかったら、[画像を共有または埋め込む]ボタンをクリックします。

ストリートビューのHTMLを発行してコピー

[共有]を開いたら、「地図を埋め込む」を押します。
地図のプレビューが表示されるので、表示縮尺と地図の埋め込みサイズを確認して、[HTMLをコピー]を押します。
※このプレビュー画面でストリートビューの表示場所を変更しても、実際に埋め込まれるストリートビューには反映されません。

WordPressの記事にHTMLを埋め込む

WordPressの記事の編集画面を開きます。
記事のGoogleMapを埋め込みたい場所に移動して、ブロックメニューで「カスタムHTML」を選びます。

カスタムHTMLの編集画面が開いたら、ストリートビューでコピーしたHTMLを貼り付けます。

HTMLを貼り付けたら、[プレビュー]ボタンを押します。
記事に表示したときのプレビューが出るので、チェックします。

表示の角度やサイズ感に問題なければ、これで「GoogleMapのストリートビューを記事の中に埋め込む方法」の手順は終わりです。

まとめ

記事の中にGoogleMapのストリートビューを埋め込む方法についてまとめました。

ストリートビューは周囲の様子を目線を変えて見られるのがよいですね。
とある記事では元々、ストリートビューで表示した場所をスクリーンショットを記事に掲載していたのですが、一点からの方向のみの画像だと伝わり憎いなと思い、ストリートビューを直接埋め込む方法に切り替えました。結果、狙い通り、周囲の状況が分かりやすくなったと思います。

動作については、以下のデモの部分でもお試しいただけます。