AMPページでGoogleマップを表示する方法 – ストリートビューもOK!

AMPページでGoogleマップを表示する方法

AMP(Accelerated Mobile Pages)ではJavaScriptを使うことができないため、従来の方法ではドラッグできる(グリグリ動く)Googleマップを表示することはできません。しかし、ちょっとした裏技(?)を使うことで、AMPページでもグリグリ動かせる地図を表示することができます。地図だけでなく、ストリートビューも見ることができます。

サンプル

論より証拠、AMPでGoogleマップを実装するサンプルをご覧ください。バリデーション・エラーが出ることなく、AMPページでもGoogle Mapが表示されます。

 

ポイントは amp-iframe

<amp-iframe> を使うことでGoogleマップを表示することができます。AMPページではJavaScriptが使えませんが、インラインフレームとしてJavaScriptを使っているページを読み込めばOKということです。裏技という言葉が若干恥ずかしい程に単純です。

 

AMPページでGoogleマップを表示する方法

AMPページでGoogleマップを表示するための手順を完全解説いたします。

Googleマップを使うにはAPIキー(無料)が必要になるため、お持ちでない方はまずAPIキーを発行しましょう。Google Maps JavaScript API – Google Developers の「キーを取得」から無料発行できます。

Google Maps JavaScript API – Google Developers
https://developers.google.com/maps/documentation/javascript/?hl=ja

 

直接読み込み と 間接読み込み の2つの方法があります。サクッと地図を表示したいだけなら直接読み込み、凝ったことをしたいなら間接読み込みになります。

 

直接読み込み法

Google Maps Embed API  のURLを<amp-iframe>のsrc属性に設定することで、AMPページに驚くほど簡単に地図を埋め込むことができます。Google Maps サーバから直接インラインフレームに読み込むので、直接読み込み法と呼んでいます(説明の便宜上、勝手にそう呼んでいるだけです)。

サンプルコード

 

間接読み込み法

Google Maps のサーバからではなく、ご自身のウェブサイトに地図を表示したページ(埋め込み対象ページ)を作り、それをamp-iframeで読み込みます。一手間増えますが、自由度にカスタイズすることができます。

1. 読み込み対象ページの作成
埋め込み対象ページはGoogle Maps JavaScript API を使って普通のHTML5ページとして作るだけです。AMPでGoogleマップを実装するサンプル の埋め込み対象ページは下記となっています。ソースを見ていただければわかりますが、ごく普通のHTML5ページです。
https://www.craneto.co.jp/examples/amp/google_map_iframe/

2. amp-iframeで読み込み
読み込み対象ページの URL を amp-iframe のsrc属性に設定することで、Googleマップを埋め込むことができます。「黄色い人のマーク」を道路にドラッグすれば、ストリートビューも問題なく見ることができます。
AMPページでGoogleストリートビューを表示

サンプルコード

 

<amp-iframe> の罠にご注意

<amp-iframe> はページ上部に表示できないという特殊な仕様があります。ページ最上部から600pxより下の位置、または、ビューポートの75%より下の位置(いずれかを満たせばOK)に置かなければ、バリデーション・エラーになります。※下記が仕様の原文となります(この記事執筆時点では日本語訳はなし)

amp-iframe may not appear close to the top of the document (except for iframes that use placeholder as described below). They must be either 600px away from the top or not within the first 75% of the viewport when scrolled to the top – whichever is smaller.

出典: https://www.ampproject.org/ja/docs/reference/components/amp-iframe

 

ページ上部に<amp-iframe>を表示したい場合には、placeholder を使うことでバリデーションエラーを回避して表示することができ、AMPでGoogleマップを実装するサンプル でもplaceholderを使ってバリデーション・エラーを回避しています。placeholderについては https://www.ampproject.org/ja/docs/reference/components/amp-iframe を参照ください。

 

以上、AMPページでGoogleマップを表示する方法でした。