Google map and street view

【簡単】Googleマップやストリートビューの埋め込み方

【簡単】Googleマップやストリートビューをウェブサイトやブログへ埋め込むには

こんにちは。サラリーマンで育児に奮闘している「おったん」です。

この記事では、Google Map(グーグル・マップ)ストリートビュー(360°ビュー)のウェブサイトやブログへの埋め込み方法をご紹介します。

以前、WordPressにて登山、マラソン、トレイルランといったGPSの位置情報の軌跡を地図に表示する方法をご紹介しました。

Google Map(グーグル・マップ)ストリートビュー(360°ビュー)の地図の埋め込み方も知りたい方がいるのではないかと思い、今回こちらの記事にまとめてみました。

埋め込む方法はとても簡単で、WordPressだけではなく、他のウェブサイトやブログでも活用できるのでおすすめです。

前回のGPSの位置情報の軌跡を地図に表示する方法は下の記事でまとめていますので、そちらも参考にしてみてください。

あわせて読みたい関連記事

【WordPress】GPSの位置情報を地図に表示させるにはWP-GPX-Mapsが簡単でおすすめ こんにちは。サラリーマンで育児に奮闘している「おったん」です。 この記事では、WordPressでGPSの位置情報の軌跡を地図(マッ[…]

wp-gpx-maps_icatch

Googleマップを埋め込む方法

①埋め込みたいGoogleマップの地図の表示

まず、Googleマップでウェブサイトややブログに埋め込みたい地図を表示させます。ここでは、例として東京スカイツリーの周辺地図をWordPressのブログに埋め込んでみます。

Googleマップの検索窓で「スカイツリー」と検索します。すると東京スカイツリーの周辺地図を表示させることができます。

②Googleマップの埋め込み用のコードを生成

地名の検索を行うと、地名の正式名称(ここでは「東京スカイツリー」)の下に「ルート・乗換」、「保存」、「付近を検索」、「スマホに送信」、「共有」というボタンが表示されます。

これらのボタンの中から「共有」のボタンをクリックします。

Googleマップの埋め込み1

「共有」の画面では、「リンクを共有する」、「地図を埋め込む」というタブが選択できるので、「地図を埋め込む」を選択します。

すると、埋め込み用のHTMLのコードが表示されるので、「HTMLをコピー」のリンクをクリックし、コードをコピーします。

Googleマップの埋め込み2

③Googleマップのウェブサイトやブログへの埋め込み

コピーしたGoogleマップの埋め込み用のコードをウェブサイトやブログに貼り付け、地図正しくが表示されるか確認します。

以下のような地図が表示されればGoogleマップの埋め込みは成功です。

おったん
Googleマップがこんなに簡単に
しかも無料、すごい!

ストリートビューや360°ビューを埋め込む方法

①埋め込みたいストリートビューや360°ビューの表示

ストリートビューをウェブサイトやブログに埋め込む方法は、Googleマップを埋め込む方法と同様です。

まず、Googleマップ埋め込みたいストリートビューの画面を表示させます。ここでは、例として古座間味ビーチ360°ビューをWordPressのブログに埋め込んでみます。

検索窓に「古座間味ビーチ」と検索し、「写真」の中にある「ストリートビューと360°ビュー」を選択します。すると古座間味ビーチのストリートビューや360°ビューが表示させることができます。

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

②ストリートビューや360°ビューの埋め込み用のコードを生成

埋め込みたいストリートビューや360°ビューを表示できたら、埋め込み用のコードを生成します。

画面上部の小さいグレーのボックスの中にメニューボタンがあります。メニューボタンをクリックすると、「印刷」、「問題の報告」、「画像を共有または埋め込む」が表示されるので、「画像を共有または埋め込む」を選択します。

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

共有の画面では、Googleマップを埋め込むときの共有ボタンをクリックしたときと同様に、「リンクを共有する」、「地図を埋め込む」というタブが選択できるので、「地図を埋め込む」を選択します。

すると、埋め込み用のHTMLのコードが表示されるので、「HTMLをコピー」のリンクをクリックし、コードをコピーします。

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

③ストリートビューや360°ビューのウェブサイトやブログへの埋め込み

最後に、コピーしたストリートビューや360°ビューの埋め込み用のコードをウェブサイトやブログに貼り付け、正しく表示されるか確認します。

以下のような地図が表示されればGoogleマップの埋め込みは成功です。

man_smile4おったん
360°ビューも簡単に埋め込むことができました
ドラッグすると360度様々な視点から風景が見れます
古座間味ビーチはいつか行ってみたい

地図をカスタマイズする方法

地図の縮尺を変えるには

埋め込む地図の縮尺を変えるには、予めコードを生成する前に表示したい地図の大きさに縮尺に変更しておきます。

例えば、上の例で示した東京スカイツリーが日本のどこにあるのか示したいときは、予め日本全体がわかる縮尺を表示させます。その後、「共有」ボタンをクリックしてコードを生成します。

Googleマップの埋め込み縮小

地図の縮尺を変更したあとに生成したコードを埋め込むと、下の地図のように地図の縮尺を変えて表示することができます。

Googleマップで経路や航空写真を埋め込むには

Googleマップの経路図を埋め込むには、Googleマップの埋め込み用のHTMLを生成する前に、経路を検索して地図に表示させておきます。

ここでは、例として、浅草にある雷門から東京スカイツリーまでのルートを表示したGoogleマップをWordPressのブログに埋め込んでみます。

以下のようにルートの検索し、経路図をGoogleマップ上に表示させます。その後、左上のメニューボタンをクリックします。

Googleマップの埋め込み経路

メニューの中の下の方にある「地図を共有または埋め込む」をクリックすると埋め込み用のHTMLを生成できるので、そのコードを任意のウェブサイトやブログに埋め込みます。

Googleマップの埋め込み経路2

そうすると、以下のような経路を表示させた状態のGoogleマップを埋め込むことも可能です。

交通状況等一部例外はありますが、基本的にはGoogleマップ上で、埋め込みたい地図をGoogleマップに表示させた後にHTMLの埋め込みコードを生成することで任意の地図をウェブサイトやブログに埋め込むことが可能でした。例として、Googleマップを航空写真に切り替えてから埋め込みコードを生成すると、以下の地図のように航空写真も埋め込むことが可能です。

レスポンシブデザイン(表示を拡大する方法)

初期設定のGoogleマップの埋め込み用のコードは、表示されるGoogleマップの横幅が固定されています。そこで、横幅の設定をレスポンシブデザインに対応するよう埋め込みコードを書き換えます。

以下のように、横幅の設定である「width」を固定値の値(ここでは600)を「100%」に書き換えると地図の表示がレスポンシブデザインに対応するようになります。

width=600 -> width=100%

Google マップのAPIとiframeで埋め込む方法の違い

今回ご紹介したGoogleマップの方法は、iframeを使用した埋め込み方法で、特に制限がなく無料で使用することが可能です。

更にカスタマイズした地図を表示させるには、GoogleマップのAPI(GoogleMapAPI)を使用する方法が必要になってきます。GoogleMapAPIで地図を表示させるには、一定回数を超えると有料になるので注意が必要です。

通常の地図の仕様であれば、今回ご紹介したiframeでの埋め込み方法で十分ではないかと思います。

まとめ

この記事では、Google マップストリートビュー(360°ビュー)のウェブサイトやブログへの埋め込み方法をご紹介しました。

Google マップストリートビュー(360°ビュー)を埋め込む方法はとても簡単で、WordPressだけではなく、他のウェブサイトやブログでも活用できるのでおすすめです。

この記事が、Google マップストリートビュー(360°ビュー)をウェブサイトやブログに載せたいと思っている方に役立てば幸いです。

Google map and street view
最新情報をチェックしよう!