cancel
Showing results for 
Search instead for 
Did you mean: 
ksauber
Surveyor

Embedding from Google Draw

Jump to solution

I have created a page in Google Draw that I am trying to embed into a Canvas page.  It is embedding well, but I'm having trouble with my links.  They are working in Google Draw, but I can't get the links to work in Canvas.  Has anyone else encountered this same issue?

Tags (4)
2 Solutions

Accepted Solutions
chofer
Community Coach
Community Coach

Sure...  So, you'll want to use a line of code similar to this:

<iframe src="http://www.w3schools.com" width="800" height="500"></iframe>

...where the website you'll be putting in this line of code is the shared link you got from your Google Docs drawing.  If you don't add the width and height size, then by default, it will set the width at 300 and the height at 150, and that won't be viewable to most people.  So...you might want to play around with those numbers (especially the height) to fit your needs.  Hope this helps!!!

View solution in original post

I'm necroing this post as I found the answer today.

 

Don't use the "Publish to Web" link as it renders a flattened, "dead" image.

 

Instead, use <iframe> as normal in the HTLM editor, but for the src use the Google Draw preview address.  I.E. "http://somestuffandgobledeygook.com/theidnumberetc/preview".

 

Make sense?

 

Cheers!

(and make sure you set your height and width proportionally).

View solution in original post

13 Replies
chofer
Community Coach
Community Coach

Hi  @ksauber ​...

First off, I'm going to let you know that this is my first time using the Drawing part of Google Drive (which is what I think you are referring to), so I'm hoping my answer here is correct (but I'm not 100% sure).  So, I'll tell you what I did:

  1. Logged in to my Google Drive account.
  2. Followed the steps here to create a Drawing document: Create a drawing - Docs editors Help
  3. Created some stuff in the Drawing space...including a link to Google's search engine.
  4. Used options within Google to get a link to "share" (anyone with the link can see my drawing).
  5. Signed out of my Google account.
  6. Used "iframe" embed code to embed the Google Drawing in a Canvas page.
  7. Clicked on my Google link I created, and it showed a little pop-up link which I could click on again to visit the site.

GoogleDrawing.jpg

Again, I hope this is what you are asking about.  If not, we can try and troubleshoot further.  Thanks!

Yes, this is exactly what I am trying to do.  However, I did it a bit differently and I'm wondering if that's my problem.  I created my Google Draw Document and then published to the web.  Then I grabbed the HTML embed code and entered it into the HTML editor in Canvas.  Could you explain more about how you used the "iframe" embed code?  Thank you for taking the time to go through all of the above steps.  I really appreciate it. 

chofer
Community Coach
Community Coach

Sure...  So, you'll want to use a line of code similar to this:

<iframe src="http://www.w3schools.com" width="800" height="500"></iframe>

...where the website you'll be putting in this line of code is the shared link you got from your Google Docs drawing.  If you don't add the width and height size, then by default, it will set the width at 300 and the height at 150, and that won't be viewable to most people.  So...you might want to play around with those numbers (especially the height) to fit your needs.  Hope this helps!!!

View solution in original post

This worked!!  Thank you!! I'm not sure I understand why the links will work when I embed it using an ifram and a link rather than the HTML embed code, but it works and that's what matters!  I have one more question.....when I embed the doc this way it shows it as it appears in edit mode in Google Draw with the checkered background, toolbar above, the share button, my account info, etc., as is pictured in the image below. 

54697_pastedImage_1.png

Do you know if there is a way to embed the published version as in the picture below?  (This is how it looks when I used the HTML embed code, but the links won't work like this.)  Thank you so much for all of your help so far.  I truly appreciate it. 

54699_pastedImage_2.png

chofer
Community Coach
Community Coach

Hi  @ksauber ​...

Assuming you are signed in to Google Docs using the same browser that you are using the sign in to your Canvas instance, if you completely sign out of Google Docs, navigate to another page in Canvas, and then return to the embedded Google Docs page in your course, you should see that you're now signed out of your document...such as in this example from my own sandbox course:

GoogleDrawing1.jpg

My guess was that, for me, since I had connected my Google account in my own settings for Canvas, it still appeared as though I was signed in after I embedded the document in a Canvas page.

As for the checkered background...no clue on that one.  As you can tell, the same thing is happening for me, too.  😞

chofer
Community Coach
Community Coach

 @ksauber ​...

Thinking about this more, I wonder if the checkered background is kind of like a transparent background because it's a drawing?  I've seen something similar in Adobe Fireworks (graphics software).  I have a different Google Docs document (just a standard word processed document) embedded in my course, and that one has a white background.

mpoole
Surveyor

 @ksauber ​,

I think I see the issue you are having.  When you create something in google draw and then generate the html embed code, google draw renders it out as an image and then you are embedding a still image so it strips away the links.

When you use an iframe code, you are basically opening a window to a webpage inside your Canvas window.  So, when you use the iframe/link embed method that  @chofer ​ describes, you are actually putting the google draw editor inside your Canvas, rather than your rendered drawing.  That's why it is coming up with the dashboard and the checkered background.

I know everyone is going to think I work for Thinglink, but this is another situation where I would use it.  You can generate your google drawing and then upload it into thinglink to add the links that you want.

Another option is to generate each image separately and then use the Rich Content Editor to do the layout and add the links.

PS--That design is SO SO cute!!!

I will second  @mpoole ​ suggestion that this is a great use for ThingLink. The "card" view embeds very nicely into an iframe. Check out Re: An Interactive Overview​ for more details about embedding ThingLink images into Canvas.

 @ksauber ​ you can open an incognito browser in Chrome and log in to Canvas to see what your embedded document will look like to students who don't have edit rights on that Google drawing. Check out Browse in private with incognito mode - Chrome Help for more info.

madams5
Community Member

Hello,

Re: my MindMap "Drawing" with same issues...

I messed with this issue all day. Here are the issues I discovered:

1) I don't want the the drawing to come up with the GoogleDraw tool bar when I embed the file in Canvas.

2) I do want multiple hyperlinks to work.

3) If you save the drawing as .jpg or .png the image is raster (image), not vector (shapes), and looses all hyperlinks.

4) Short of using interlink and adobe photoshop layers, this process is too complicated, because none of those will update if you change the drawing...

Possible Workaround:

1) Use a one slide Google Slide (presentation) instead of a GoogleDrawing. Why?

     a) Same design tools.

     b) Keeps hyperlinks active.

     c) Updates in Canvas as you change in GoogleSlides.

     d) Embed with iframe > File > Publish to Web > Embed {copy code}, paste in HTML editor in Canvas.

     e) Change HTML code for speed to delayms=120000 (or longer).

2) If it already exists in GoogleDrawing, or as an image, (suffer, like me now), then assign the Drawing jpg as a background to the slide (Drag and Drop works best), and use the Slides polyline tool to redraw the shapes, make the boarder and inside fill as transparent, and then insert a hyperlink for the shape. Note: This can be a cool way to outline shapes or people in a a group picture, and link them to their own pages...

Drawback:

1) Still has GoogleSlide presentation boarder around it.

The problem is in GoogleDrawing. I just don't understand why it is sooooo stand alone. You can't assign a GoogleDrawing to a GoogleSlide. Why?

You can't group you shapes from GoogleDrawing and copy them, and then paste them into a GoogleSlide. Why?

If you make a GoogleDrawing in GoogleDocs, you can't ever use it again... Why?

This is the third and last time I get burned by GoogleDrawing, and I love Google everything else...

Notes: The checkerboard pattern does mean transparent.

Good luck.