Googleマップとストリートビューの埋め込み

ホームページのアクセスページやお店や場所を紹介するブログで便利な「Googleマップ」。今回はGoogleマップと、周辺360度が見渡せるGoogleストリートビューをホームページに埋め込む方法をご紹介したいと思います。

こんな方におすすめ

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

Googleマップの埋め込み
- 埋め込み方法
Googleストリートビューの埋め込み
- 埋め込み方法
まとめ

Googleマップの埋め込み

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

埋め込み方法

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

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

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

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

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

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

ポイント

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

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

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

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

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

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

埋め込み方法

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

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

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

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

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

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

まとめ

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

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

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

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

参考360度カメラ記事一覧

htmlやcssなど「プログラミングを学んでみたい」という方には、無料体験が受けられるプログラミングスクールがオススメです。

無料体験があるプログラミングスクール