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 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>¢er=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.
Related
I'm embedding google maps to my website.
This link is what my website map looks like.
https://gyazo.com/fda645cc29b78ce791d90c878648b180
This is what I want my website to look like.
https://gyazo.com/2093195fd87a6e208c7d4d4510f02e81
This is what I have tried so far:
(Note: this is all html, no javascript)
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/directions?key=(APIKEY)&origin=Oslo+Norway&destination=Telemark+Norway&avoid=tolls|highways"allowfullscreen>
But I want something bit different. Basically, what I want is for users to have the option to put in where they are and where they are going.I don't want to have a preset option like the API directions gives me. Any help would be appreciated!
You can't use the Embed API to do that (origin and destination are required parameters in directions mode).
However you can go to http://maps.google.com, set up the map the way you want (with no origin or destination), then click on the "hamburger" menu, click on share or embed map, then the embed map tab and get an <iframe> URL that loads a map that looks like you want.
Example
From this URL:
https://www.google.com/maps/dir///#59.8937805,10.6450363,11z
Following that process yields this iframe code:
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d128083.93009419793!2d10.645036343724943!3d59.89378054345609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m3!3e6!4m0!4m0!5e0!3m2!1sen!2sus!4v1471120225355"
width="100%"
height="450"
frameborder="0"
style="border:0" allowfullscreen></iframe>
live URL:
http://www.geocodezip.com/example_embedded_map_directions_SO_empty.html
Does anyone know if it's possible to embed a Google Map using iframe into a Github pages page built using the automatic page generator?
For example, I would like to embed something like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d100921.8397227734!2d-122.50711698562192!3d37.77111185957552!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sGithub!5e0!3m2!1sen!2sus!4v1464784986282" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
When I try to embed the above, however, the iframe element appears to be stripped from the final HTML so that no map is shown.
I looked around a bit and couldn't find much information on embedding maps, or in general, using iframe elements in Github pages.
People appear to have luck embedding Youtube videos within an iframe, but the same tweak does not help with the maps.
Any suggestions?
You will not be allowed to insert iframe from the page generator.
You have to edit your page from, for example, https://github.com/username/repositoryname/blob/gh-pages/index.html, by clicking on edit button (see picture) and insert your iframe code.
I am using Google Maps Embed API with place mode in an iframe. I am passing the zoom parameter but it's not working. However, when I click on "View larger map" the zoom level is used.
The embedded URL is
https://www.google.com/maps/embed/v1/place?key=AIzaSyAb9V7hKU334BfV4yLIOhcQyUu1ERkU_ZQ&q=44215+15th+St+W+Lancaster,CA+93534¢er=34.4503429,-117.923845&zoom=17
<html>
<body>
<iframe
width="450"
height="250"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAb9V7hKU334BfV4yLIOhcQyUu1ERkU_ZQ&q=44215+15th+St+W+Lancaster,CA+93534¢er=34.4503429,-117.923845&zoom=17">
</iframe>
</body>
</html>
It seems to be the center parameter that's causing this (although I'm unsure why as according to the Embed API the center parameter is supported by all 4 map modes
I changed the URL to https://www.google.com/maps/embed/v1/place?key=AIzaSyAb9V7hKU334BfV4yLIOhcQyUu1ERkU_ZQ&q=44215+15th+St+W+Lancaster,CA+93534&zoom=17 and it seems to work
i'm having a problem with new google maps embed.
As you can see in my print off my site, the maps embed is so far zoomed out.
How can i solve this problem ? I want to embed the map with a regular/normal zoom
I can't add image to this post because i don't have the necessary reputation.
Here's a link of my print: http://imageshack.com/a/img89/958/figs.jpg
Thanks guys!
You can add a zoom paramater to the src part of your html code. The lower the number the farther out you zoom. Zoom = 10 is a good place to start testing.
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Space+Needle,Seattle+WA&zoom=10"></iframe>
You can find out more in Google's documentation on this page under "Optional Parameters".
https://developers.google.com/maps/documentation/embed/guide
Use <embed>[…]</embed> instead of <iframe>[…]</iframe>.
<embed src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3691.5217809275764!2d-48.55680935!3d-22.296098!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94c7580226334421%3A0xc3000e7281a1ebdb!2sRua+Louren%C3%A7o+Prado%2C+218+-+Centro!5e0!3m2!1spt-BR!2sbr!4v1394721710945%22; width="400" height="300" frameborder="0" style="border:0"></embed>
Source: https://productforums.google.com/d/msg/maps/kcjwmB5XFx8/qjR9DyAFPDwJ
All you do is in the url after your coordinates or place of interested you add &zoom=n (n being the zoom level)
I am using the link iframe code, directly from the google maps site, but the map when rendered on the page is very different. It is too close and it lacks the custom objects I have placed on the map.
The map is saved and public.
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&
amp;msid=105969386264938156859.0004933a7b5534e8bb519&ll=51.442667,-2.076416&
amp;spn=0.032099,0.051327&z=13&output=embed"></iframe><br /><small>View
<a href="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&
amp;msid=105969386264938156859.0004933a7b5534e8bb519&ll=51.442667,-2.076416&
amp;spn=0.032099,0.051327&z=13&source=embed" style="color:#0000FF;
text-align:left">Fitzgraham Academy of Dance</a> in a larger map</small>
The embedded maps are shaky at best, I recommend you look into Google Maps API and program a perfect map for yourself
I suggest you look at this link. It allows you to control the content a lot better. If you have any issues look at the source code on the Samples.