Google Maps API的簡單示例與加速移動頁面（AMP）不兼容

我正在嘗試使用加速移動頁面（AMP）技術實現這個簡單的「Hello World」示例。Google Maps API的簡單示例與加速移動頁面（AMP）不兼容

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

它工作正常，但如果我插入AMP庫，標籤

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

它停止工作的第二個孩子。

我在做什麼錯？

來源

2017-03-09 Hookstark

好吧，似乎只有amp-iframe是在AMP支持的頁面中嵌入地圖的唯一可能方式。

以下是關於如何在嵌入地圖時使用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-style></style>標籤
AMP不允許用戶生成的腳本，因此您的腳本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

Google Maps API的簡單示例與加速移動頁面（AMP）不兼容

回答

相關問題