I have created a custom Google map, and follow all instructions like share it to everyone (public) and try to embed on my website via iframe.
Here you can see the iframe:JSFiddle
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=z76-dWS2uqvM.kbKEneg2wOL0" width="640" height="480"></iframe>
It looks ok, when the user is logged-in into the Google account, but if you try to open it in Firefox (logged-out) it returns an empty iframe.
So, when I embed this on my website, people cannot see it. How to make this working, and how to display this multiple pin map to everyone who enters my website?
Unfortunately, this is an old issue which still shows up sometimes. But, try out the steps mentioned in this link. If that doesn't help either, give this a try. And if you're doing this by using the Maps API, this might help. Hopefully one of these helps.
Related
I'm developing a website where the users can fill a textarea where besides various text, they can copy/paste a Google Maps link.
At the moment I'm able to recognize and catch those links, the next step would be to use them to show the corresponding map on another page.
The problem is that it seems that I can't use the link as generated by the Google Maps page, an example:
https://www.google.it/maps/place/Roma+RM/#41.9099856,12.3955722,11z/data=!3m1!4b1!4m5!3m4!1s0x132f6196f9928ebb:0xb90f770693656e38!8m2!3d41.9027835!4d12.4963655?hl=it&authuser=0, but also many other various formats depending on what the user was looking for (a specific place, directions...)
If I try to put this link into an iframe like
<iframe frameborder="0" src="<the_link_above>&zoom=17&key=MY_API_KEY"></iframe>
the map doesn't appear and looking into the browser's console I read Load denied by X-Frame-Options: <the above link> does not permit cross-origin framing.
A link which can be embedded has a different formatting, like https://www.google.it/maps/embed/v1/place?q=<an address>&zoom=17&key=MY_API_KEY
but I can't ask to the users to edit the link, they would just copy and paste what they get from Google as the website is not intended only for expert users, but for anyone.
Is there a method to use the link as generated by Google Maps or should I quit the idea to use it?
I'm currently making an educational resource with google drive.
I've currently got the "Publish to web" version of the google documents embedded in an iframe in an html document using
<iframe src="https://docs.google.com/document/d/e/2PACX-1vSaUZ2XolOoqc0M12v-VNTTMcz3dIAnAOO9gaCyifoAXhlWiKz114M2QYoQ5d-dNBEsgWDcXahKNMSD/pub" frameborder="0"></iframe>
I've inserted hyperlinks (using the built in hyperlink function) in the google docs, to link to other (published) google docs eg:
https://docs.google.com/document/d/1XnTTbjedXkL3OfeELMwzabeeL4FjnOjarmmWbKb97EY/pub
At the moment, all clicked links are opened in a new tab. This happens whether I link to other google docs, or to external sites. Naturally, this is quite frustrating for navigating the site.
I'd like to have them open either...
in the same iframe
or to another webpage that appears in the same tab (which I could then embed the target document in). I don't really mind which, as long as a new tab isn't created every time someone clicks a link.
I see from similar questions posted that in the past people seem to have had the opposite problem - trying to force the links to open in new tabs, so perhaps something has changed with the way links are handled?
For onlookers, the reason for the varying behavior is due to the query parameter that either is or isn't present as the src value:
You can see that the OP does not have ?embedded=true at the end (after /pub).
<iframe src="https://docs.google.com/document/d/e/2PACX-1vSaUZ2XolOoqc0M12v-VNTTMcz3dIAnAOO9gaCyifoAXhlWiKz114M2QYoQ5d-dNBEsgWDcXahKNMSD/pub" frameborder="0"></iframe>
Google doesn't document the differing functionality very well, but a URL like
https://docs.google.com/document/d/e/2PACX-1vSaUZ2XolOoqc0M12v-VNTTMcz3dIAnAOO9gaCyifoAXhlWiKz114M2QYoQ5d-dNBEsgWDcXahKNMSD/pub?embedded=true
will provide the desired behavior of keeping links opening in-iframe.
I am stuck on converting my web app to IFRAME. I have stripped the code back as much as i can and the script itself works to a point.
The issue i am having is when it was running in NATIVE, it would return some html once complete, now it gets to that point and just sits there although it has done everything correctly to that point.
I am new to this and not sure if i should post code or a link to the web app but any help would be gratefully received.
Link to web app
https://docs.google.com/spreadsheets/d/1hXdgqwKAfbouV5CHo4wLJTpbP_d6TLIANlsU1Fvv0xk/edit?usp=sharing
You can create an iframe with the link in src attribute.
HTML
<iframe src="https://docs.google.com/spreadsheets/d/1hXdgqwKAfbouV5CHo4wLJTpbP_d6TLIANlsU1Fvv0xk/edit#gid=703430807">
</iframe>
This code can you include in your website. Let me know if this is what you want.
See this fiddle
I have an iframe embed as follows, which is currently public:
<iframe src="https://drive.google.com/embeddedfolderview?id=0B3gN5-3YYPjHeGlTVjduRnBTVGs#list" width="100%" height="500" frameborder="0"></iframe>
and it will show up in my website, but it will not navigate folders within that iframe, but instead navigate to a new window. Is there a way to make all navigate stay self contained in the iframe?
You can see samples of this at: http://help.realsmart.co.uk/embedding-a-google-drive-folder-in-a-post-or-page/
which shows how to embed a folder. It looks nice, but when navigating into deeper folders, it just navigates away.
Edit Added Fiddle: https://jsfiddle.net/0y4cm891/
Edit on 5 April 2020:
I made a new tool specifically for this purpose. For details and steps, read my answer to this similar question: https://stackoverflow.com/a/61034751/8111094
Old answer:
There are two ways to do this.
If you are using wordpress, you cam simply use the plugin Use Your Drive (its a paid plugin). There are few other similar plugins as well. As far as I have seen, none are free.
Use the Google Drive API, it will require you to write your own app and a google cloud account. Watch this video of a similar use case published by google https://www.youtube.com/watch?v=Z5G0luBohCg
I can not for the life of me figure out why when I copy and paste the maps API embed code from the google site, that's supposed to be setup to show a location, that it zooms out to show multiple maps of the globe. If anyone can help me out that'd be great.
I am looking more specifically for a style or something thats small to set the load up zoom?
Any help is greatly appreciated
Please note that the ADDRESS and KEY are indeed valid, I just dont want to post that info on the site.
html:
<iframe width="100%" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=ADDRESS&key=KEY"></iframe>
Suggestion: Use the embedded map creation wizard.
When I used q=77+Mass+Ave,+Cambridge+MA and my key, I got the same behavior you describe. When I used the Autocomplete in the embedded map creation wizard, it gave me:
q=77%20Mass%20Ave%20-%20MIT%2C%20Cambridge%2C%20MA%2C%20United%20States
(q=77+Mass+Ave+-+MIT%2C+Cambridge%2C+MA%2C%+United+States)
which works as expected