WordPressのブログや自分のWebサイトに地図を表示したい場合、Googleマップを使えると便利ですよね？
この記事では、これらのWebページに色々なバリエーションでGoogleマップを表示する方法５選を紹介します。
表示方法① ページ内埋め込み
東京駅 アクセスマップ
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 東京都千代田区丸の内１丁目 (クリックで地図を開く)
上記の住所をクリックして、Googleマップを別タブで開きます。
住所をWebページに記述した後、Googleマップの該当住所のURLをリンクに設定しています。
表示方法④ 航空写真のGoogleマップを埋め込む
東京駅 アクセスマップ
航空写真のGoogleマップをページ内に埋め込んでいます。
Googleマップで航空写真を表示した後、共有ボタンを押して、埋め込みリンクを取得してWebページに貼り付けます。
表示方法⑤ 360度ビュー(ストリートビュー)を埋め込む
東京駅 駅内360度ビュー
Googleマップの360度ビュー(ストリートビュー、インドアビュー)を埋め込んでいます。
Googleマップでストリートビューを表示した後、メニューの共有ボタンから埋め込みリンクを取得してWebページに貼り付けます。
こんなリアルな360度ビューをパッと埋め込めちゃうのはすごいですね！
まとめ
GoogleマップのWebページへの貼り方5選を紹介しました。
参考になれば幸いです。
もし需要があればもう少し詳しい手順を解説したいと思います。
最後まで読んで頂いてありがとうございます。
以上です。