web-dev-qa-db-ja.com

AMPHTMLページにマーカー付きの地図を埋め込む

現在、私は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の問題でこれに関する既存の質問は見当たらないので、他の誰かがこの同じシナリオに遭遇したかどうか知りたいです。

google-mapsamp-html
10
Du3

秘訣は、「表示」モードではなく「配置」モードを使用することです。プレイスモードでは、プレイス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>&center=44.0,122.0&zoom=15&size=600x400"
  width="600"
  height="400"
  layout="responsive"
  placeholder
/>

iframe内で、次の形式になります。

<amp-iframe ... >
    <amp-img .../>
</amp-iframe>
6
Josh Baker

このコードは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">
2
Gabriel Caruso

アンプフレームにページを埋め込むには、次のものが必要です。

  1. 追加のJavascript（<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>）
  2. アンプページの上部から少なくとも600pxの配置。
1
Jay