現在、私はGoogle Maps APIを使用して、特定の場所へのマーカー(緯度/経度の座標セットが指定されている)を含む地図を生成しています。 AMP HTMLでは、現在これを行う方法はamp-iframe拡張機能を使用しているようです https://github.com/ampproject/amphtml/tree/master/extensions 。問題は、「ビュー」マップを使用していない限り、座標でGoogleマップの埋め込みコードを使用できないことです。プレイスIDを持っていないので、プレイスモードを使用できません。マーカーがないため、「表示」モードを使用できません。私は https://developers.google.com/maps/documentation/embed/guide#overview で高低を見てきました
マーカーが配置されているAMPHTMLページにGoogleマップを含める適切な方法は何ですか?フォーラムやGithubの問題でこれに関する既存の質問は見当たらないので、他の誰かがこの同じシナリオに遭遇したかどうか知りたいです。
秘訣は、「表示」モードではなく「配置」モードを使用することです。プレイスモードでは、プレイスIDは必要なく、座標を使用するだけです。例として:
<amp-iframe
width="600"
height="400"
layout="responsive"
sandbox="allow-scripts allow-same-Origin allow-popups allow-popups-to-escape-sandbox"
frameborder="0"
src="https://www.google.com/maps/embed/v1/place?key=<key>&q=44.0,122.0">
</amp-iframe>
追記として、これをAMPで使用している場合、iframeがページの上部に近すぎる場合に備えてプレースホルダー画像を含めることをお勧めします(AMPルール)。その場合、次のように<amp-img>
を使用できます。
<amp-img
src="https://maps.googleapis.com/maps/api/staticmap?key=<key>¢er=44.0,122.0&zoom=15&size=600x400"
width="600"
height="400"
layout="responsive"
placeholder
/>
iframe内で、次の形式になります。
<amp-iframe ... >
<amp-img .../>
</amp-iframe>
このコードはGitHubリポジトリで見つかりました https://github.com/ampproject/amp-by-example/blob/master/src/20_Components/amp-iframe.html#L72-L84
<amp-iframe width="600"
height="400"
title="Google map pin on Googleplex, Mountain View CA"
layout="responsive"
sandbox="allow-scripts allow-same-Origin allow-popups"
frameborder="0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848">
アンプフレームにページを埋め込むには、次のものが必要です。
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
)