Вставить карту с маркером на HTML-страницу AMP

В настоящее время я использую API Карт Google для создания карты с маркером (с заданным набором координат широта / долгота) для заданного местоположения. В AMP HTML, похоже, в настоящее время для этого используется расширение amp-iframe https://github.com/ampproject/amphtml/tree/master/extensions. Проблема в том, что вы не можете использовать код для встраивания Google Maps с координатами, если вы не используете карту просмотра. У меня нет идентификатора места, поэтому я не могу использовать режим места. Я не могу использовать режим «Просмотр», так как в нем нет маркеров. Я внимательно посмотрел на https://developers.google.com/maps/documentation/embed/guide#overview

Как правильно включить карту Google на HTML-страницу AMP с установленным на ней маркером? Я не вижу никаких существующих вопросов по этому поводу на форуме или в выпусках Github, поэтому мне любопытно, сталкивался ли кто-нибудь еще с таким же сценарием.


google-maps amp-html
person Du3    schedule 21.03.2016    source источник
comment
Вы правы, похоже, что в настоящее время это можно сделать с помощью расширения amp-iframe. Карты работают с amp-iframe, статические карты должны отлично работать с amp-img, а amp-click-to-play должны действительно хорошо работать вместе. Я думаю, что карты с маркерами еще не поддерживаются в Amp HTML, если вы не используете view карту. Посмотрите этот пример.   -  person abielita    schedule 23.03.2016
comment
Предоставьте Gist или JSFiddle, показывающие, что вы предпочитаете встраивать карты. На основе этого мы найдем решение. Вы также видели этот пример: ampbyexample.com/components/amp-iframe/#example11   -  person ade    schedule 23.03.2016
comment
оба ваших примера требуют идентификатора места, которого у меня нет. У меня есть только координаты. Я хочу сбросить маркеры. В настоящее время вам нужно сделать это с помощью Javascript с Google Map API. Если AMP HTML должен иметь расширенные фрагменты для замены скрытого javascript, похоже, единственный способ добиться этого - найти идентификатор места на стороне сервера координат с помощью API Карт Google, а затем я могу использовать PlaceID. Вопрос здесь - есть ли другой способ справиться с этим сценарием, не просматривая серверную часть Place ID. Карты по координатам и маркерам очень распространены.   -  person Du3    schedule 28.03.2016

Ответы (3)


arrow_upward
6
arrow_downward

Уловка состоит в том, чтобы использовать не режим «просмотра», а режим «место». В режиме места вам не нужен идентификатор места, вы можете просто использовать координаты. В качестве примера:

<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>
person Josh Baker    schedule 05.02.2017
comment
Привет, @Josh, я пробовал ваше решение, мой код слишком длинный для комментария, поэтому, пожалуйста, посмотрите его здесь. Вы понимаете, почему у меня это не работает? stackoverflow.com/questions/51597621/ - person Flo; 30.07.2018

arrow_upward
2
arrow_downward

Я нашел этот код в их репозитории 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">

person Gabriel Caruso    schedule 27.03.2016
comment
Для этого требуется идентификатор места. Ищу скоординированный подход, включающий маркеры. - person Du3; 28.03.2016

arrow_upward
1
arrow_downward

Для встраивания страницы в amp-frame требуется:

  1. Дополнительный Javascript (<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>)
  2. Размещение на расстоянии не менее 600 пикселей от верха страницы amp.
person Jay    schedule 06.02.2019