I got Google map API credentials for a browser key. For allowed referrers I put in my website like *.mysite.com/* and www.mysite.com/*
Then I used the Quick Start Build a map page at https://developers.google.com/maps/documentation/embed/start to make the code. After pasting in my API key, it gave me the iframe code to embed on the web page.
But the map does not show up on the web page. This is the code I'm using:
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:EjA3NyBCb290IFJhbmNoIENpciwgRnJlZGVyaWNrc2J1cmcsIFRYIDc4NjI0LCBVU0E&key=AIzaSyDFXuwn2N6KOiOK4neH8ZSBaVLnfVF5TuE" allowfullscreen></iframe>
I'm at a loss to know what to try next.
There can be several causes for this. But one that has caught me a few times, is inconsistent protocol usage (http | https). For example, if your main page is using https, but your iframe is using http, it won't show up.
But then, how do you know ahead of time, what protocol the user will using? You don't and it, actually, doesn't matter. Just begin your iframe URL without a protocol indicator, like so:
<iframe src="//www.google.com/maps/embed/v1/place?q=place_id:EjA3NyBCb290IFJhbmNoIENpciwgRnJlZGVyaWNrc2J1cmcsIFRYIDc4NjI0LCBVU0E&key=AIzaSyDFXuwn2N6KOiOK4neH8ZSBaVLnfVF5TuE" allowfullscreen></iframe>
Notice the URL begins with "//"
CSP (Content Security Policy) frame-src directive might be prohibiting loading google domain in iframe. Check for errors in dev tools console.
Google embedded map was not displayed in my react app and the problem was from attribute names.
what we get from google maps :
<iframe
src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6912532.961290727!2d49.1916915706487!3d32.224158771670105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ef7ec2ec16b1df1%3A0x40b095d39e51face!2sIran!5e0!3m2!1sen!2snl!4v1651148400254!5m2!1sen!2snl'
width='600'
height='450'
style='border:0;' //<-------
allowfullscreen='' //<-------
loading='lazy'
referrerpolicy='no-referrer-when-downgrade' //<-------
></iframe>
what we should put in react project :
<iframe
src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6912532.961290727!2d49.1916915706487!3d32.224158771670105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ef7ec2ec16b1df1%3A0x40b095d39e51face!2sIran!5e0!3m2!1sen!2snl!4v1651148400254!5m2!1sen!2snl'
width='600'
height='450'
style={{ border: 0 }} //<-------
allowFullscreen='' //<-------
loading='lazy'
referrerPolicy='no-referrer-when-downgrade' //<-------
></iframe>
Related
I'm trying to embed a Google Data Studio report URL as iframe in Wordpress.
It works fine when using the report URL provided by Data Studio (embed report):
<iframe width="600" height="450" src="https://datastudio.google.com/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y" frameborder="0" style="border:0" allowfullscreen></iframe>
It does not work when the URL carries a parameter used to row-level filter the data:
<iframe width="600" height="450" src="https://datastudio.google.com/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y?config=%7B%22walcid%22%3A%7B%22walcid%22%3A%22abcd1234%22%7D%7D" frameborder="0" style="border:0" allowfullscreen></iframe>
That URL however does work when you paste it directly into your browser.
https://datastudio.google.com/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y?config=%7B%22walcid%22%3A%7B%22walcid%22%3A%22abcd1234%22%7D%7D
Google seeks to prevent cross-domain loading / embedding of Data Studio report URLs when they include parameters. Can you think of a way to load the parameterised URL within a domain that I control.
I tried <iframe> <embed> <object> but nothing seems to work.
Any pointers appreciated!
Hello I know this might be an old thread, but I want to help anyone that might face this problem.
Replace params (the key for query parameters) with config. If you are using the embed.
The original embed iframe should look like
<iframe width="600" height="450"
src="https://datastudio.google.com/embed/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y" frameborder="0" style="border:0" allowfullscreen>
</iframe>
If you want to use param you can make it be
<iframe width="600" height="450"
src="https://datastudio.google.com/embed/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y?config=%7B%22walcid%22%3A%7B%22walcid%22%3A%22abcd1234%22%7D%7D" frameborder="0" style="border:0" allowfullscreen>
</iframe>
I think you missed the /embed/ after datastudio.google.com in the URL.
I found this in https://developers.google.com/datastudio/solution/viewers-cred-with-3p-credentials
The documentation of the data studio still needs improvements.
Hope this can help you.
Your src URLs are not quite right. They are missing embed between https://datastudio.google.com/ and /reporting/..., e.g.:
src="https://datastudio.google.com/embed/reporting/1FcmV-tCfAEu-WdUk73QWPjRoiSEPuHIf/page/J09y"
The following method worked well for me.
Create a report - add a control and specify a field you want to filter by.
Ensure the report is shared correctly and viewable by everyone.
Go to File > Report Settings. Make sure 'enable viewer filters in report link' is checked, this is crucial.
Generate an iframe by clicking on embed report in share menu, keep hold of that iframe.
Now in view mode, use the charts/tables with a filter. This will generate a unique url for that filter, so if you were to share this url with someone, it will open with the filter you specified.
Take this new url and replace it in the iframe src tag, ensure that 'embed' is added to the new url as specified in the other answers in this thread.
Look through the url and you should see your filter value, you can now programmatically replace this value in the url.
If you want to stop people from applying different filters, you can hide the filter in your report by overlaying a white/background matching rectangle. A super dirty way of doing it, but it's also the most effective.
The url in the iframe should look similar to this..
`https://datastudio.google.com/embed/reporting/foobar010120${FILTERVALUE}%20fhac`
or you can do:
let filterValue = 'a_specific_user_name';
url = `https://datastudio.google.com/embed/reporting/foobar010120${filterValue}%20fhac`;
and then in the iframe, just add src={url}
I am trying to use embed youtube code in HTML but when I press play button it say "This video is unavailable". I am using the following HTML code for it:
<iframe width="560" height="315" src="https://www.youtube.com/embed/JfJYHfrOGgQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Can anyone help me out with this? I have tried other embed youtube videos too, still says same thing. I am using Chrome.
I had the same issue recently and it had nothing to do with video owners embedding settings. Apparently YouTube forbids embedding some videos in a localhost environment without a public domain, but your video can be embedded with no issue whatsoever through a public domain/subdomain: Replace the src value in the JSFiddle from #PStarczewski's answer with your video link and it will work properly.
For me this was caused by a referrer policy "no-referrer" on my site. Youtube seems to block embedding when no-referrer is set.
Hope to save someone from wasting time with this crap.
TL;DR
Youtube allows only https pages to stream with embeds/iframes.
Make sure that embeds are allowed by the video owner.
Set a less restrictive referrer policy such as "no-referrer-when-downgrade" in order to allow youtube to know the origin of the request. In django you can do this by adding following line in settings.py
SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"
Long read:
If you are facing this in django application recently, it could because of the recent change in referrer policy in django 3. Read more here
When you add an iframe for a youtube video (given that the video owner allows embeds), the referrer (the host origin where the video is being played) is sent to youtube, by the scripts inside the iframe (the embed url gets a new page which brings all the required scripts). If the server is setting a referrer policy which prevents the communication about the referrer, youtube rejects the play request and responds with 204 - no content.
Starting from django v3.x, the referrer policy is set to "same-origin" by default which is too restrictive to let youtube know about the origin. In this case, youtube does not allow the video playback and responds with code 204.
This can be resolved by setting a less restrictive referrer policy. You can use "no-referrer-when-downgrade".
In django, you can set this with the following variable in settings.py file.
SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"
The above policy states that referrer will be sent as empty when the access protocol is downgraded, else the origin will be sent as referrer (which is acceptable). Given that, youtube only allows https origins, for this case it means that if the iframe is embedded in a webpage with https, the referrer will be sent properly and should not cause issues while playing youtube videos through such embeds.
On YouTube there is so called "embed settings" where owner of the video can decide whether or not to allow for it.
Here is an example:
JSFiddle
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLsyvDWwjkTqtOmqAiTzzfHspTAztB-udL" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/JfJYHfrOGgQ" frameborder="0" gesture="media" allow="autoplay; encrypted-media" allowfullscreen></iframe>
And here you can find more details about this: YouTube Restrict embedding
The problem I had was that my YouTube video was stuck loading when I embedded it. But if I logged out from my YouTube account, then it started to work. I hope this is a temporary bug YouTube will fix soon.
In my case the video was playing fine on my localhost but was showing unavailable when played from the remote server. Turns out it was happening because of this HTTP header: Referrer-Policy: no-referrer.
Removing Referrer-Policy: no-referrer HTTP header solved the problem for me.
Almost took me 15 minutes to solve it!
I'm trying to embed photospheres into Squarespace.
Google Maps works fine, but doesn't suit my needs and looks as follows:
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1471028758208!6m8!1m7!1sF%3A-hjcchX5MD5g%2FV03OAcggYUI%2FAAAAAAAAKeM%2FXwIrucnK4IQkwWbhxu9BrvOATMYZaMmKgCLIB!2m2!1d37.870246!2d-119.360704!3f125.91384035181916!4f6.045852307800146!5f0.7820865974627469" width="100%" height="800" frameborder="0" style="border:0" allowfullscreen></iframe>
Instead, I want to embed via sphereshere.net Their embed looks as follows but DOESN'T work.
<iframe src="http://sphereshare.net/#!/e/c467ba7af9753ee287cd44550493e966" height="320" width="620" frameborder="0"></iframe>
What do we think is the problem?
Usually, in cases like this, the problem is the use of the http protocol in an iframe while you're still logged into Squarespace via https. You should try to view the page while not logged in, being sure you're viewing the page via http and not https. If you provide a link to the page, I'm happy to take a look as well.
The reason for this has to do with browser security. Loading a resource over http while viewing the parent website over https is a potential security risk, so browsers do not allow it. Google maps supports loading over https (and you can see the link you're using for Google Maps uses https). Whereas sphereshare.net does not support https, so you're using http. When logged into Squarepace, you're loading the website over https but the sphereshare iframe over http, so browsers do not allow it.
In the future, hopefully you'll be able to use https with sphereshare, then it would work in either case. Until then, you'll have to log out and set your protocol to http in order to view iframes loaded over http.
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
I am attempting to embed a google map into a page of a website using google maps' iframe capabilities (so that I can avoid having to add things within the head and inside the body tag of the page)
When I create the iframe code, everything is fine except for the fact that the info window associated with the pin is opening by default when the page loads.
I'm wondering if anyone has successfully overridden this behavior. I've found a few posts describing how to do it for a geocoded address but not for a specific place of business (it seems the attributes are different)
Code:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=Madison+Square+Garden+New+York+NY&hl=en&cd=1&ei=PoNXS-hcmuLJBNfexZUI&sig2=dFymmpNhsjY6dEvjphBbPQ&sll=40.731053,-73.951703&sspn=0.127506,0.130247&ie=UTF8&view=map&cid=5487804314630162138&ved=0CCUQpQY&hq=Madison+Square+Garden+New+York+NY&hnear=&ll=40.750354,-73.992491&spn=0.006295,0.006295&iwloc=A&output=embed"></iframe>
(This is the suggestion I found on 'net that does not seem to work for a specific place of business: http://www.sugarwebdev.co.uk/blog/hide-or-remove-the-info-window-on-an-embedded-google-map/)
I tried the solution posted in your question, using the iframe code you provided and it worked fine. I added:
&iwloc=near
right after the 'output=embed' at the end.