Googleマップを自分のWebページに貼り付ける方法5選

WordPressのブログや自分のWebサイトに地図を表示したい場合、Googleマップを使えると便利ですよね?

この記事では、これらのWebページに色々なバリエーションでGoogleマップを表示する方法5選を紹介します。

 

表示方法① ページ内埋め込み

東京駅 アクセスマップ

GoogleマップをWebページ内に埋め込んでいます。
最も簡単で世の中のWebページでよく見る手法です。

Googleマップで該当の土地や建物を検索した後、共有ボタンから埋め込み用リンクを取得してWebページに貼り付けます。

共有ボタンは下記画像の緑枠の箇所です。

 

表示方法② 地図画像貼付け&クリックでGoogleマップを開く

Google検索で土地や建物を検索したときに、検索結果に出てくるタイプです。
食べログやぐるなびでも、こちらが使われているようです。

Google Maps Platform APIsを使って、地図の画像を取得して表示する必要があります。

そのためには事前準備として、https://cloud.google.com/maps-platformにアクセスしてアカウント登録し、APIキーの取得が必要で少し面倒です。

詳しくは、Google Maps Platform へようこそへアクセスして、手順に従って実施が必要です。

上記の画像取得APIを使用すると、地図画像の中心の緯度経度・地図画像サイズ、地図の拡大率などをリクエストパラメータとして画像を取得可能です。

 

表示方法③ 住所クリックでGoogleマップを開く

東京駅
〒100-0005 東京都千代田区丸の内1丁目 (クリックで地図を開く)


上記の住所をクリックして、Googleマップを別タブで開きます。

住所をWebページに記述した後、Googleマップの該当住所のURLをリンクに設定しています。

 

表示方法④ 航空写真のGoogleマップを埋め込む

東京駅 アクセスマップ

航空写真のGoogleマップをページ内に埋め込んでいます。

Googleマップで航空写真を表示した後、共有ボタンを押して、埋め込みリンクを取得してWebページに貼り付けます。

 

表示方法⑤ 360度ビュー(ストリートビュー)を埋め込む

東京駅 駅内360度ビュー

Googleマップの360度ビュー(ストリートビュー、インドアビュー)を埋め込んでいます。

Googleマップでストリートビューを表示した後、メニューの共有ボタンから埋め込みリンクを取得してWebページに貼り付けます。

こんなリアルな360度ビューをパッと埋め込めちゃうのはすごいですね!

 


まとめ

GoogleマップのWebページへの貼り方5選を紹介しました。

参考になれば幸いです。
もし需要があればもう少し詳しい手順を解説したいと思います。

 

最後まで読んで頂いてありがとうございます。

以上です。