Accelerated Mobile Pages（AMP）で動作しないGoogle Maps APIの簡単なサンプル

この簡単な「Hello World」サンプルをAccelerated Mobile Pages（AMP）テクノロジで実装しようとしています。Accelerated Mobile Pages（AMP）で動作しないGoogle Maps APIの簡単なサンプル

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     #map {height: 100%;} 
     html, body {height: 100%;margin: 0; padding: 0;} 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     var map; 
     function initMap() {map = new google.maps.Map(document.getElementById('map'), {center: {lat: -34.397, lng: 150.644},zoom: 8});} 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=foo&callback=initMap" async defer></script> 
    </body> 
</html>

それは大丈夫動作しますが、私は、タグ

<script async src="https://cdn.ampproject.org/v0.js"></script>

の第二子としてAMPライブラリを挿入する場合には動作を停止します。

私は間違っていますか？

出典

2017-03-09 Hookstark

AMPでサポートされているページにマップを埋め込む方法は、amp-iframeのみです。

マップを埋め込む際にamp-iframeを使用する方法については、exampleをご覧ください。

<amp-iframe width=300 height=300 
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" 
    layout="responsive" 
    frameborder="0" 
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA"> 
</amp-iframe>

出典

2017-03-09 12:07:21 KENdi

感謝。通常のHTMLページ内にGoogle Maps-Embed-API iframeを使用すると動作します。しかし、あなたが提供したコードで同じ 'src'を使用しても、それはありません。私は 'Hello World' AMPサンプルを作成し、あなたが提供したコードを自分のキーで追加しました.AMP検証済みですが、省略記号が現れ、マップは表示されません。 – Hookstark

あなたは、アンプのhtmlタグに<html amp lang="en">
を逃しているあなたは、あなたのCSSがAMPは、ユーザーが生成したスクリプトを許可していません<amp-style></style>タグ
内にある必要があります
アンペアの定型的なコードを逃しています、あなたのスクリプトinitMap()は非準拠です
マップを埋め込みたい場合は、<amp-iframe>タグ内に配置する必要があります。 Like this：

<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>

出典

2017-03-10 22:24:28 Ksenia

Accelerated Mobile Pages（AMP）で動作しないGoogle Maps APIの簡単なサンプル

答えて

関連する問題