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

В настоящее время я использую 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 Вставить карту с маркером на AMP HTML-страницу

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

источник

2016-03-21 Du3

Вы правы в * "оказывается способ сделать в настоящее время используется расширение amp-iframe "*. Карты работают с 'amp-iframe', статические карты должны отлично работать с' amp-img' и 'amp-click-to-play' должны заставить их работать вместе очень хорошо. Я думаю, что Карты с маркерами пока не поддерживаются в HTML-коде, если вы не используете карту 'view'. Проверьте этот пример (https://github.com/ampproject/amphtml/blob/master/examples/released.amp.html). – abielita

Просьба предоставить Gist или JSFiddle, в которых указаны ваши предпочтения. Мы выясним решение, основанное на этом. Также вы видели этот пример: https://ampbyexample.com/components/amp-iframe/#example11 – ade

Для обоих ваших примеров требуется идентификатор места, которого у меня нет. У меня только координаты. Я хочу сбросить маркеры. В настоящее время вы должны сделать это с помощью Javascript с API карт Google. Если AMP HTML должен иметь богатые фрагменты, чтобы заменить javascript за кулисами, это единственный способ сделать это, просмотрев идентификатор места с координаты сервера с API Карт Google, а затем я могу использовать PlaceID. Вопрос здесь - есть ли другой способ справиться с этим сценарием, не глядя на сторону сервера идентификатора места. Карты с помощью координат и маркеров очень распространены. – Du3

Я нашел этот код на их GitHub Repository 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>

источник

2016-03-27 00:51:51

Для этого требуется идентификатор места. Ищете координированный подход, включающий маркеры. – Du3

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

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

источник

2017-02-05 22:34:43

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

ответ

Смежные вопросы