記事の中にGoogleMapストリートビューを埋め込む方法 | 今日もどこかに旅したい

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

ブログ運営
記事内に広告・プロモーションを含む場合があります。

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

Cocoonで記事を書いていて、

GoogleMapのストリートビューを表示させたいなぁ

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

スポンサーリンク

やりたいこと

今回やりたいことは

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

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

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

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

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

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

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

準備するもの

・ブラウザ版GoogleMap

手順

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

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

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

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

HINT

記事に埋め込まれるストリートビューの表示は、ここで表示したストリートビューの表示範囲・角度になります。特定の表示範囲がある場合は、変えてから[画像を共有または埋め込む]ボタンをクリックします。

「金シャチ横町からお城は見えるのかな?」と天守閣のある方に目線を向けたストリートビューです。
ストリートビューのHTMLを発行してコピー

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

WordPressの記事にHTMLを埋め込む

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

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

コピーしたHTMLを貼り付け

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

プレビューでチェック

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

スポンサーリンク

まとめ

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

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

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

デモ

動作確認のためのデモとして残しています。

デモ

金シャチ横町のストリートビューを埋め込む

●金シャチ横町のストリートビュー

●名古屋城天守閣の方角に角度を変えた金シャチ横町のストリートビュー地図

上の金シャチ横町のストリートビューと同じ場所で表示角度を変えてから、HTMLを作成したもの

この感じだと金シャチ横町からだと、天守閣は見えないかもしれないですね。

コメント