Embed Map with Marker on AMP HTML page

前端 未结 3 2499
小鲜肉
小鲜肉 2021-02-20 17:33

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 current

相关标签:
3条回答
  • 2021-02-20 18:13

    I found this code on their GitHub Repository 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">
    

    0 讨论(0)
  • 2021-02-20 18:17

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

    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>
    
    0 讨论(0)
  • 2021-02-20 18:23

    Embedding a page in an amp-frame requires:

    1. Additional Javascript (<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>)
    2. Placement at least 600px from the top of the amp page.
    0 讨论(0)
提交回复
热议问题