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?
Related
In Google Sites, it is possible to embed a Google Apps Script which has been published as a Web App. You just click "embed" and paste the URL of the Web App. It is possible to use the mouse to resize the iframe. However, I could not set the iframe to be of full width. Is that possible? Also, is it possible to make the whole page scrollable (instead of the iframe) when the Web App has some larger height as well? (I actually don't want to use any other functionalities of Google Sites except that it "hosts" my Google Apps Script with a custom URL and that it gets rid of the standard header warning that this Web App is not by Google).
Sorry
Unfortunately, AFAIK, this is not possible within Google sites.
I have experimented with various custom iframe HTML and CSS to try and find a workaround, but due to the way the site is rendered, it will always wrap your custom code in its own HTML and CSS. Any solution along these lines seems like it will be unreliable.
If you would like to see this specific functionality you can always submit a feature request.
My best workaround so far
Start a new site.
Delete all the elements, including the title.
Then add in your webapp embed.
It let me resize it vertically as far down as I wanted, it seems like full width since it is the only element on the page, and it doesn't present me with the warning.
I have an app that uses the Google Drive API, and I need to display the thumbnails. But when I pass the link to an <img> tag it responds with a 404, but if I open the link manually in another tab in my browser it display just fine
You want to put the thumbnail of the file retrieved from Google Drive to your HTML.
The thumbnail link is retrieved by Drive API.
When you put it and open the HTML, 404 is returned. But when you directly access to the URL of the thumbnail link, you can see the image on your browser.
I believe your goal and your issue like above. For this, how about this answer?
Issue and workaround:
From your situation, I think that when you directly access to the thumbnail link, you might have logged in Google Account. By this, the image can be seen. And also, I thought that you might have used the following thumbnail link. This is the thumbnail link retrieved by Drive API.
https://docs.google.com/feeds/vt?gd=true&id={fileId}&v=1&s=###&sz=s220
Unfortunately, it seems that this link cannot be directly used at the HTML of outside. So in order to use the thumbnail at the HTML of outside, how about changing the endpoint?
Modified endpoint:
https://drive.google.com/thumbnail?sz=w640&id={fileId}
Please replace {fileId} of your file ID.
w640 means 640 pixels in the width. If you want to change the height, please useh instead of w.
Please share publicly the file you want to retrieve the thumbnail. It's On - Anyone with the link. By this, above link can be used. Please be careful this.
Note:
When the following HTML is used with the above link, the thumbnail can be seen.
<img src="https://drive.google.com/thumbnail?sz=w640&id={fileId}">
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.
Can I use images stored in Google Drive to be used in a website by the html,<img src="<webContentLink>" /> ?
Where <webContentLink> is returned after a file is uploaded and is in the format, 'https://drive.google.com/uc?id=<FILEID>&export=download'
I have a small website created for account users only. They can upload files to their google drive folder and this folder has permissions set to share with the accounts of the other users (specific people only). This is an ASP.NET MVC 5 website using the Google API Client Libraries for .NET.
In Chrome and Firefox the images display fine, in IE and Safari they don't show and return a 302 status code. Sometimes if you view the image directly in a new tab and then refresh the web page it shows. It might also show if the folder permission is set to 'anyone with the link', but this isn't ideal.
The documentation (https://developers.google.com/drive/v3/web/manage-downloads) says, 'If you want to allow a user to view a file directly in a web browser instead of through the API, use the webContentLink.' I understood this to be okay to use img src='' to display an image directly without the API, however it then goes on to say, 'You can either redirect a user to this URL, or offer it as a clickable link'.
So can Google please confirm if 'webContentLink' can be used in img src='', or not and why it works in some browsers and not others? I've read many posts on this, some old, some more recent. If it's not to be used in img src I think it should be made clear in the documentation.
Many thanks
Yes, you can definitely use webContentLink as your img src in your HTML page. I tried and this is what I got on my sample HTML page.
<img src = "https://drive.google.com/uc?id=0Bzgk4zncCwI7aDZCSHY4YU0zNUF&export=download">
webContentLink can be obtained using Files.list and place 'files' in the fields parameter.
Displaying an image from Google Drive can be done in 3 steps:
Retrieving your image ID
Right click on your image and select Share.
You'll see a link that you need to copy. You will extract the image's ID from the URL.
Here is what your sharing link should look like:
https://drive.google.com/open?id=YourFileId
Check your sharing settings
Your images will only be visible to people who have access to those files. To allow anyone access to your images, you need to set the sharing setting as Visible with the link.
Display your image
With your sharing settings properly configured and your image file IDs at hand, you can now specify how your images will be displayed using a prescribed format.
https://drive.google.com/thumbnail?id=YourFileID
More details can be found here
when I do this I just get a sign like an nonexistent image.
Why?
I just copy paste this line:
<img src = "https://drive.google.com/uc?id=0Bzgk4zncCwI7aDZCSHY4YU0zNUF&export=download">
JS Fiddle
I want to use google drive to store the files, but allow the users of my website to be able to edit them transparently, so that they don't have to go to google drive's website.
Is this possible with the current API? Thus far I have only seen how to create an app for them to install in google drive, or doing something like DrEdit (https://developers.google.com/drive/examples/), which parses the files to JSON and uses the ACE editor, which is definitely not what I want.
EDIT:
I believe it is not possible to do this with Google Drive, I've decided to go with Zoho Docs instead.
Yes it's possible. The biggest consideration is how much formatting you want to support. Eg. if it's plain text, it's very simple. If you want to support character or layout formatting, it becomes more complex.
I don't believe its possible to embed the editor (or even embed a preview!) using an iframe, because if you look at how the google docs page loads, it first redirects you to the login page, and that automatically logs you in if you are already logged in, and redirects you back to the docs editor.
This means that the iframe would have to at least pass through the login page, even if the user doesn't need to enter anything. However, google's login page has the x-frame-option header set to SAMEORIGIN (or deny?), and thus, the browser refuses to display it, and thus you can't actually get logged in!
The only way I've found to enable just preview embedding (not editing), is to publish the document first (via the File->publish to web menu item).