在AMP HTML页面上使用标记嵌入地图 [英] Embed Map with Marker on AMP HTML page

问题描述

目前我使用Google Maps API来生成带有标记（给定经纬度坐标）的地图到指定位置。在AMP HTML中，目前看来，使用amp-iframe扩展名的方式是 https： //github.com/ampproject/amphtml/tree/master/extensions 的。问题在于，除非您使用查看地图，否则无法使用带有坐标的Google地图嵌入代码。我没有地点ID，因此我无法使用地点模式。我无法使用'查看'模式，因为它没有标记。我对 https://developers.google.com/maps的评价很高/ documentation / embed / guide＃overview

在放置了标记的AMP HTML页面中包含Google Map的正确方法是什么？我在论坛或Github的问题上没有看到有关此问题的任何问题，所以我很好奇是否有其他人遇到过这种情况。

方案

诀窍是不使用视图模式，而是使用地点模式。使用地点模式，您不需要地点ID，只需使用坐标即可。举例来说：

 < amp-iframe 
 width =600
 height =400 
 layout =response
 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-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
占位符
 /> 
  
，以便它具有以下格式：  
 
 
 < a mp-iframe ...> 
< amp-img ... /> 
< / amp-iframe> 
  
 
Currently I use the Google Maps API to generate a map with a marker (given a lat/long set of coordinates) to a given location. In AMP HTML, it appears the way to do this currently is using the amp-iframe extension https://github.com/ampproject/amphtml/tree/master/extensions.  The issue is you cannot use Google Maps embed code with coordinates unless you are using a 'view' map.  I don't have a Place ID, so I cannot use the Place mode. I can't use 'View' mode, since that has no markers. I've looked high and low at https://developers.google.com/maps/documentation/embed/guide#overview


What is the proper way to include a Google Map on an AMP HTML page that has a marker placed on it?  I don't see any existing questions about this on the forum or in Github issues, so I'm curious if anyone else has run into this same scenario.
解决方案
The trick is to not use the "view" mode, but rather the "place" mode. With the place mode, you don't need a place ID, you can simply use coordinates. As an example:
<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>
As an additional note, if you are using this with AMP, I recommend you include a placeholder image in case the iframe is too close to the top of the page (an AMP rule). In that case, I might use an <amp-img>, like so:
<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
  />
within the iframe, so that it has the following format: 
<amp-iframe ... >
    <amp-img .../>
</amp-iframe>


                        
这篇关于在AMP HTML页面上使用标记嵌入地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！