ブログなどのWebサイトにGoogleマップのストリートビューを埋め込んで表示させたいことがあります。

例えば、東京スカイツリーを紹介したページを作ったとします。

「スカイツリーをこの場所から見上げました。高いな～」など書いて、あわせてストリートビューを表示しておけば、ページを移動することなく付近を360°のパノラマ写真で見られるので、周辺の様子を伝えるにはすごく便利です。

スカイツリー高いな～

いいですね。というわけで、今回はGoogleマップでストリートビューの埋め込みのコードを取得する方法を書きました。もし同じような事をされたい場合は、ご参考ください。

Googleマップでストリートビューの埋め込みコードを取得する方法

それでは、今ほど例として挙げた「東京スカイツリー」のストリートビューの埋め込みコードを取得します。いくつか方法があるんですが、私が最もラクだと思う方法でやりますね。

まず、Googleで「スカイツリー」と検索します。すると検索結果の右部に地図が表示されます。

検索結果に表示された地図をクリックするとGoogleマップが開いて、左部に「ストリートビュー」が表示されますので、クリックします。

検索結果に地図が表示されない時は

検索する場所や建物によっては検索結果に地図が表示されない場合もあります。

その時は直接Googleマップを開いて、表示したい場所まで地図を操作してクリックしましょう。左部にストリートビューが表示されますのでクリックすればOKです。

ストリートビューを開いたら、埋め込みたい位置までストリートビューを操作します。

ここで、右下部あたりに歯車アイコンがあるのでクリックします。

いくつか選択肢が出てきますので、「画像を共有または埋め込む」をクリックします。

下の画像のように「画像の埋め込み」をクリックすると、埋め込みコードが表示されます。「<iframe src・・・」とあるのが埋め込みコードですね。このコードをコピーして、埋め込みたい箇所に貼り付ければOKです。

ちなみにですが、埋め込みサイズも変更できます。例えば「カスタムサイズ」をクリックします。

下の画像だと「横幅800×縦幅600」ピクセルの埋め込みコードが表示されます。好きなサイズに変更して埋め込みコードをコピーすればOKですね。

埋め込みサンプル

冒頭にも埋め込みましたが、こんな感じです。埋め込まれたストリートビュー内でクリックやドラッグ、スマートフォンやタブレットをご利用の方はタップやスワイプなどをすると操作できます。いろいろといじってみましょう。

まとめ

少し前にGoogleマップの埋め込み方法が変わって、そのタイミングでストリートビューの埋め込みコードの取得が旧Googleマップに一度戻さないとできなかったような気がします。最近見たら、新しいGoogleマップでも出来るようになっている事を知ったので、今回手順をまとめました。

「Webサイトにストリートビューを埋め込みたいんだけど、埋め込みコードを取得する方法を知りたい」という方にご参考頂けますと幸いです。