検索エンジン最大手のグーグルは検索サービスの他に様々なサービスを提供してくれています。
その一つにグーグルマップがあります。
旅行サイトで場所を説明するのにグーグルマップは非常に役に立ちます。
今回はグーグルのストリートビューをワードプレスのないの記事に埋め込む方法です。
簡単ですので是非覚えて利用してみてください。
表示させたい場所をグーグルマップ表示
今回はローマにあるコロッセオのストリートビューを記事内に埋め込むという例で進めます。
まずはグーグルマップでコロッセオを表示させます。
グーグルの検索に「コロッセオ」と記入し検索します。
検索結果が表示されたら、「地図」のタブをクリックします。
するとコロッセオのグーグルマップが表示されます。
ストリートビューを表示させる
グーグルマップで目的地が表示できたら、次はストリートビューを表示させます。
画面右下の人のマークを地図上にドラッグします。
人形マークを地図上にもっていくと、ストリートビューが表示可能な通りは下の画面のようにブルーラインが表示されます。
自分が見たいと思うポイントに人形マークをドラッグしていき、ドラッグを開放します。
するとそのポイントでのストリートビューが表示されます。
ストリートビューの画面は道に沿って進んだり回転したりできるので自分がワードプレスに埋め込みたいと思う画面まで移動、表示させます。
そして画面左上の、下の画面では赤丸の部分をクリックします。
するとメニューが表示されるので「画面を共有または埋め込む」を選択します。
すると画面中央に小さな画面が新しく表示されます。「地図を埋め込む」タブを選択します。
「地図を埋め込む」を選択すると、小さい画面の中に、埋め込んだ時に表示されるストリートビューが表示されています。これでよければ「HTMLをコピー」をクリックします。
表示の画面を拡大したり縮小したい場合は小さい画面の左下の「＋」「－」をクリックして調節します。
HTMLをコピーをクリックするとクリップボードにこのストリートビューのコードがコピーされます。
この時テキストモードにしておくのを忘れないでください。ビジュアルモードだとコードが機能しません。
これでワードプレスの記事内にストリートビューが表示されます。
またスマートフォンでストリートビューが画面からはみ出すのを防止するためには、コードの中の
「width=”640″」を「width=”100%”」に置き換えると、スマートフォンでも画面からはみ出さずにストリートビューが表示されます。
慣れるとストリートビューの埋め込みは非常に簡単なので是非試してみてください。
今回は以上です。
＜関連リンク＞
写真のプロパティのGPS情報から場所を特定する方法
【イタリア旅行、お得20】グーグルマップを活用するとお得
ワードプレスにグーグルマップを埋め込み、スマートフォンで画面からはみ出すのを修正
イタリア行き最安航空券を検索
最安で快適イタリアのホテルを検索
