12

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.

Du3
  • 1,424
  • 6
  • 18
  • 36
  • You are right in *"it appears the way to do this currently is using the amp-iframe extension"*. Maps work with `amp-iframe`, static maps should work great with `amp-img` and `amp-click-to-play` should make them work together really well. I think Maps with Markers is not yet supported in Amp HTML unless you are using a `view` map. Check this [example](https://github.com/ampproject/amphtml/blob/master/examples/released.amp.html). – abielita Mar 23 '16 at 07:34
  • Please provide a Gist or JSFiddle showing your preferrer Maps embed. We'll figure out a solution based on that. Also have you seen this example: https://ampbyexample.com/components/amp-iframe/#example11 – ade Mar 23 '16 at 13:22
  • 1
    both of your examples require a place id, which I do not have. I only have coordinates. I want to drop markers. Currently you have to do this with Javascript with Google Map API. If AMP HTML is to have rich snippets to replace the behind the scenes javascript, it appears the only way to accomplish this is via looking up the place ID from coordinates server side with the Google Maps API, and then I can use the PlaceID. The question here - is there any other way to handle this scenario without looking up a Place ID server side. Maps via coordinates and markers are very common. – Du3 Mar 28 '16 at 14:46

3 Answers3

6

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>
Community
  • 1
  • 1
Josh Baker
  • 598
  • 7
  • 16
  • Hi @Josh, I've tried your solution, my code is too long for a comment, so please see it here. Can you see why it's not working for me? https://stackoverflow.com/questions/51597621/google-amp-with-google-maps – Adam Jul 30 '18 at 15:41
2

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

Gabriel Caruso
  • 789
  • 1
  • 7
  • 17
  • 1
    This requires a place id. Looking for a coordinated based approach that includes markers. – Du3 Mar 28 '16 at 14:39
1

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.
Jay
  • 1,086
  • 11
  • 25