AMPでGoogleマップを表示する方法（エンジニア向け） #GoogleMapsAPI

Accelerated Mobile Pages（AMP）でGoogleマップを表示する方法です。

※AMPページでGoogleマップを表示する方法 – ストリートビューもOK！をエンジニア向けに簡潔に書き直したものです。丁寧な説明が必要なら原文をお読みください。

　概要

APIキーの取得とアクティベートをしておく
<amp-iframe>を使用する（<amp-map>というタグはない）
amp-iframe のsrc属性にGoogleMapsを表示したURLを指定
src属性値の指定方法は2パターンある（後述）

APIキーの取得とアクティベートをしておく

下準備として、APIキーを取得して Google Maps Embed API と Google Maps JavaScript API をアクティベート。

※エンジニア向けのため手順省略。不明なら下記を参照。
https://developers.google.com/maps/documentation/javascript/?hl=ja

直接埋め込み法と間接埋め込み法

<amp-iframe>のsrc属性URLの指定方法は２パターン。

Google Maps Embed API　により Google Maps サーバ上のURLを指定
自前のHTML5ページを指定

（Google Maps サーバから地図データを直接読み込むため）前者を直接埋め込み法と呼び、後者を間接埋め込み法と呼ぶ。なお、正式なものではなく、便宜上、そう呼んでいるだけです。

直接埋め込み法

Google Maps Embed API　のURLを指定するだけ。
https://developers.google.com/maps/documentation/embed/?hl=ja

<amp-iframe height="250"
            sandbox="allow-scripts allow-same-origin allow-popups"
            layout="fixed-height"
            frameborder="0"
            src="https://www.google.com/maps/embed/v1/place?key=[あなたのAPIキー]&q=place_id:ChIJnxAAO1aLGGARJqvi8d4oczM">
</amp-iframe>

サンプル：　AMPでGoogleマップを実装するサンプルに実例あり

間接埋め込み法

1. amp-iframe の src属性に指定するページを作成

Google Maps JavaScript APIで地図を表示したページを作成。src属性に指定するのは、（AMP HTMLではなく）通常のHTML5ページのため、もちろんJavaScriptを使えます。

サンプル: Iframe用Googleマップ
※ただ地図を表示しているだけのHTML5ページです。

2. amp-iframeで読み込み

src属性に上記1で作成したページのURLを指定すると、AMPページでGoogleマップが表示されます。

<amp-iframe height="250"
            sandbox="allow-scripts allow-popups"
            layout="fixed-height"
            frameborder="0"
            src="https://www.craneto.co.jp/examples/amp/google_map_iframe/">
</amp-iframe>

サンプル：　AMPでGoogleマップを実装するサンプルに実例あり

amp-iframe の罠に注意

<amp-ifarme>をページ上部で使用するとAMPバリデーション・エラーになるので、600pxまたはビューポートの75%（height）より下に表示する必要がある点に注意。ページ上部に表示したい場合には<amp-ifarme>のplaceholderを使用のこと。

以上となります。

AMPでGoogleマップを表示する方法（エンジニア向け）

概要