Embed Map with Marker on AMP HTML page

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.

Josh Baker

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>

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

Embedding a page in an amp-frame requires:

Additional Javascript (<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>)
Placement at least 600px from the top of the amp page.

来源：https://stackoverflow.com/questions/36135971/embed-map-with-marker-on-amp-html-page

标签

google-maps

amp-html