WEB

Googleマップとストリートビューの埋め込み!WEBサイトに活用する方法とSEO効果を解説【初心者向け】

Googleマップとストリートビューの埋め込み
  • ホームページのアクセスページ
  • お店や場所を紹介するブログ

で便利な「Googleマップ」の埋め込み表示。

今回は、Googleマップ周辺360度が見渡せるGoogleストリートビューをホームページに埋め込み表示する方法を紹介します。

関連「THETA」で撮影した360度写真を公開する方法

Googleマップの埋め込み

↑このように「Googleマップ」の位置情報をホームページやブログに埋め込み表示することができ、縮尺や位置もユーザーが任意で変更し確認することが出来ます。

こんな方におすすめ

  • 会社のホームページのアクセスページに地図を表示したい!
  • グルメブログにお店の場所と外観をわかりやすく見せたい!
  • 旅行記事に行ったおすすめスポットを紹介したい!

埋め込み方法

まずは通常のGoogle検索で埋め込みたい位置を検索します。

今回はサンプルとして「大阪城」と検索してみます。

まずは通常のGoogle検索で埋め込みたい位置を検索します。

検索結果ページ右側に「大阪城」の写真と地図、その他営業時間や連絡先等が表示されます。
この右側の地図をクリックすると、Googleマップ画面に切り替わります。

Googleマップ画面に切り替わり「大阪城」の位置が表示されます。
この地図を埋め込むには、写真の下にある「共有」ボタンをクリックします。

Googleマップ画面に切り替わり「大阪城」の位置が表示されます。

「共有」ボタンをクリックすると共有ポップアップウィンドウが開きますので、「地図を埋め込む」を選択。

「共有」ボタンをクリックすると共有ポップアップウィンドウが開きますので、「地図を埋め込む」を選択。
地図を埋め込むためのhtmlコードが表示されます。こちらをコピーしご自身のホームページにペーストすれば、Googleマップを埋め込むことが出来ます。

すると地図を埋め込むためのhtmlコードが表示されます。こちらをコピーしご自身のホームページにペーストすれば、Googleマップを埋め込むことが出来ます。

ポイント

ワードプレスの記事内に挿入する場合は、「カスタムhtml」ブロックを作成しペーストすれば表示されます。

htmlコードの左側の「中▼」と書かれたプルダウンをクリックすると「小」「中」「大」「カスタムサイズ」と埋め込む地図の大きさを選択出来ます。
デフォルトで設定されている「小」「中」「大」のサイズは下記の通りなので、ご自身のホームページのデザインに合わせて好みのサイズに設定しましょう。

小:横幅400px × 高さ300px
中:横幅600px × 高さ450px
大:横幅800px × 高さ600px

htmlコードの左側の「中▼」と書かれたプルダウンをクリックすると「小」「中」「大」「カスタムサイズ」と埋め込む地図の大きさを選択出来ます。
デフォルトで設定されている「小」「中」「大」のサイズは下記の通りなので、ご自身のホームページのデザインに合わせて好みのサイズに設定しましょう。

Googleストリートビューの埋め込み

Googleマップの埋め込みはよく見ることがあると思いますが、Googleストリートビューも同じようにホームページなどに埋め込むことが出来ます。

↑このように建物の外観も見る事ができる他、目的地からマウスや指で左右にスライドし周辺環境や前後の道を辿ったりする事もできるので非常に便利♪

埋め込み方法

それでは早速、そんな便利なGoogleストリートビューを埋め込んでみます。
先程、通常のマップの埋め込みをする際にGoogleマップ画面に切り替わったところで、左側を下にスクロールします。

スクロールすると一般の方々がアップしてくれている写真が表示され、その中に「ストリートビューと360°ビュー」という項目があるので、そこをクリックします。

すると、右側の地図が表示されていた箇所に、その場所で公開されている360°写真が表示されるので、その写真の左上あたりにある小さな黒いウィンドウの「メニュー」ボタンをクリック。

「印刷」「問題の報告」「画像を共有または埋め込む」の3項目が表示されますので、3番目の「画像を共有または埋め込む」を選択します。

ここからは上でやった通常のマップの埋め込みと同じ要領で、立ち上がった「共有」ウィンドウから「地図を埋め込む」を選択します。

htmlコードをコピーして、自分のサイトにペーストするだけ!

htmlコードをコピーして、自分のサイトにペーストするだけで、周辺環境360°を見渡せるストリートビューを自分のサイトに埋め込む事が出来ます。

まとめ

いかがでしたでしょうか。

Googleマップを自身のサイトに埋め込んでおくと、ボタン一つで全画面マップに切り替えることや、スマホの場合はアプリを立ち上げることができて、ユーザーとしても助か理ますし、ストリートビューで目的地の周りを確認できることで、近くまで行けば一目で場所が特定できるので親切ですよね。

会社のアクセスページにGoogleマップとストリートビューを埋め込んでみてはいかがでしょうか。
最後までご覧いただきありがとうございました。

ご自身で撮影された360°写真を埋め込みたい場合はこちらの記事を参考にしてみてください。

参考360度カメラ記事一覧

  • WEBやプログラミングの知識をつけたい
  • でも、スクールの学費は高すぎる

という方には、安価で始められる侍テラコヤ」がオススメ!

Check!
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る

【簡単レスポンシブ】PCとスマホで画像を切り替える方法【HTMLのみ】

WEB

2024/1/3

【簡単レスポンシブ】PCとスマホで画像を切り替える方法...

【初心者向け】CSSで背景画像だけを回転させる方法を紹介!他の応用技も

WEB

2023/12/23

【初心者向け】CSSで背景画像だけを回転させる方法を紹...

リコー「THETA SC2」で撮影した写真・動画をウェブ上で公開する方法 【360度カメラ】

WEB カメラ

2023/10/12

リコー「THETA SC2」で撮影した写真・動画をウェ...

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

WEB デザイン

2023/5/13

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2023/12/23

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

-WEB
-