Embed Map with Marker on AMP HTML page

Question

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

Answer 1

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

Answer 2

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>

Answer 3

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.