【簡単】Googleマップやストリートビューの埋め込み方│おったんの日記 wotablog

この記事の目次

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

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

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

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

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

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

1 【簡単】Googleマップやストリートビューをウェブサイトやブログへ埋め込むには
2 Googleマップを埋め込む方法
3 ストリートビューや360°ビューを埋め込む方法
4 地図をカスタマイズする方法
5 Google マップのAPIとiframeで埋め込む方法の違い
6 まとめ

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

【WP-GPX-Maps】マラソンや登山ブログでGPSトラッキングを地図に表示させる方法この記事では、WordPressでGPSの位置情報の軌跡を地図（マップ）に表示させるためのおすすめのプラグインの使い方をご紹介します。使用す[…]

Googleマップを埋め込む方法

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

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

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

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

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

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

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

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

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

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

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

おったん

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

地図の縮尺を変えるには

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

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

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

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

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

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

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

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

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

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