Простой пример API Карт Google, не работающий с Ускоренными мобильными страницами (AMP)

Question

Простой пример API Карт Google, не работающий с Ускоренными мобильными страницами (AMP)

Я пытаюсь реализовать этот простой пример "Hello World" с помощью технологии "Ускоренные мобильные страницы" (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>

это перестает работать.

Что я делаю неправильно?

0

google-maps google-maps-api-3 amp-html

Источник

user2174630 09 мар '17 в 11:39

2 ответа

Другие вопросы по тегам google-maps google-maps-api-3 amp-html

user5996134 09 мар '17 в 12:07 2017-03-09 12:07 · Answer 1 · 2017-03-09 12:07

Ну, похоже, что только amp-iframe это единственный возможный способ встроить карту в страницу, поддерживаемую AMP.

Вот пример того, как использовать amp-iframe для встраивания карты.

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

user6672897 10 мар '17 в 22:24 2017-03-10 22:24 · Answer 2 · 2017-03-10 22:24

Вы пропустили HTML-тэг amp <html amp lang="en">
Вам не хватает стандартного кода усилителя
Ваш CSS должен быть внутри<amp-style></style>тег
AMP не допускает пользовательских сценариев, поэтому ваш сценарийinitMap()не соответствует
Если вы хотите встроить карту, вы должны поместить ее внутрь<amp-iframe>тег. Как это:

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