AMPのマーカー付きマップを埋め込むHTMLページ

Question

現在、Google Maps APIを使用して、指定された場所にマーカー（緯度/経度の座標を指定）を含む地図を生成します。 AMP HTMLでは、これを行う方法は現在amp-iframe拡張子https://github.com/ampproject/amphtml/tree/master/extensionsを使用しているようです。問題は、「地図」を使用していない限り、Google Mapsの埋め込みコードを座標で使用することができないことです。私はプレイスIDを持っていないので、プレイスモードを使うことはできません。私は 'View'モードを使うことができません。それはマーカーがないからです。私は高くて低く見えたhttps://developers.google.com/maps/documentation/embed/guide#overview

マーカーが置かれたAMP HTMLページにGoogleマップを含める適切な方法はありますか？フォーラムやGithubの問題でこれに関する既存の質問は表示されないので、他の誰かがこの同じシナリオを実行しているのか不思議です。

Answer 1

私は、トリックは、「ビュー」モードではなく、「場所」モードを使用しないことです彼らのGitHubのリポジトリhttps://github.com/ampproject/amp-by-example/blob/master/src/20_Components/amp-iframe.html#L62-L72

<amp-iframe width="600" height="400" 
          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"> 
    </amp-iframe> 

Answer 2

にこのコードを見つけました。プレースモードでは、プレースIDは必要ありません。単純に座標を使用できます。例として：追加の注意点としては

<amp-iframe 
    width="600" 
    height="400" 
    layout="responsive" 
    sandbox="allow-scripts allow-same-origin allow-popups" 
    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>