Skip to main content

How to Write an Add-on for Google Docs

Well, it ain’t that difficult. If you know some HTML, CSS and JavaScript, you can create a Google Docs add-on.

Create a Google Add-on for Docs & Sheets

This step-by-step tutorial (download) will walk you through the process of creating your own add-on for Google Docs. The add-on used in the demo lets you insert a image of any address on Google Maps inside a Google Document without requiring any screen capture software.
Ok, lets’s get going.
Step 1. Open a new document inside Google Drive and choose Tools -> Script Editor. This is the Apps Script IDE where we’ll write the code for the add-on.
Step 2. Choose File -> New HTML to create a new HTML file inside the Script Editor and name your file as googlemaps.html (or anything you like).
Step 3. Copy-paste the following code in the HTML file and save your changes. This is the code that will be used to render the sidebar in your Google Documents.
    

    2. 

  2.  href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
    3. 

  3.      rel="stylesheet"> 
    4. 

  4.  
    5. 

    6. 

  6. 
 class="sidebar">
    

    7. 

  7.     
    8. 

  8.     
    9. 

  9.     
    
 class="block form-group">
    

    10. 

  10.          type="text" id="search" placeholder="Enter address.. " />
    11. 

  11.         
    12. 

  12.     
    13.
  • id='maps'>
  •  
  •  
  •  
    • Step 4. Next we will write the server side JavaScript (Google Script) that will actually render the sidebar and insert Google Maps images in the document.
      

    1. /* What should the add-on do after it is installed */
      2. 

    2. function onInstall() {
      3. 

    3.   onOpen();
      4. 

    4. }
      5. 

    5.  
      6. 

    6. /* What should the add-on do when a document is opened */
      7. 

    7. function onOpen() {
      8. 

    8.   DocumentApp.getUi()
      9. 

    9.   .createAddonMenu() // Add a new option in the Google Docs Add-ons Menu
      10. 

    10.   .addItem("Google Maps", "showSidebar")
      11. 

    11.   .addToUi();  // Run the showSidebar function when someone clicks the menu
      12. 

    12. }
      13. 

    13.  
      14. 

    14. /* Show a 300px sidebar with the HTML from googlemaps.html */
      15. 

    15. function showSidebar() {
      16. 

    16.   var html = HtmlService.createTemplateFromFile("googlemaps")
      17. 

    17.     .evaluate()
      18. 

    18.     .setTitle("Google Maps - Search"); // The title shows in the sidebar
      19. 

    19.   DocumentApp.getUi().showSidebar(html);
      20. 

    20. }
      21. 

    21.  
      22. 

    22. /* This Google Script function does all the magic. */
      23. 

    23. function insertGoogleMap(e) {  
      24. 

    24.   var map = Maps.newStaticMap()
      25. 

    25.     .setSize(800, 600) // Insert a Google Map 800x600 px
      26. 

    26.     .setZoom(15)
      27. 

    27.     .setCenter(e); // e contains the address entered by the user
      28. 

    28.   
      29. 

    29.   DocumentApp.getActiveDocument()
      30. 

    30.     .getCursor() // Find the location of the cursor in the document
      31. 

    31.     .insertInlineImage(map.getBlob()); // insert the image at the cursor
      32. 

    32. }
      33.
    Save your changes and then choose onOpen from the Run menu inside the Script editor. Authorize the script and switch to your Google Document.
    You’ll see a new Google Maps option under the Add-ons menu. Select the menu item and you’ll be able to insert maps images inside your Google Documents without using any screen capture software.

    Share your Google Add-ons with other Google Docs users

    Now that your first Google add-on is ready, you may want to distribute it to other users of Google Docs. The easiest option would be that you share your document with public and set the permission as Anyone can view. Now anyone can create a copy of your document in their own Google Drive and use your add-on.

    Popular posts from this blog

    FOR MY BLOG READER'S

    It is not for me but for my readers. 'One' resolution fROM taday: I want to look like Aamir khan (without 8 packs) Bike or Car (and why): Car, I’ve three reasons for it 1. It’s safer than bike 2. I’ve always dreamt of going on a long drive with my soul-mate in a car. 3. While driving a car you can look into the eyes of.......... obviously you can guess?? J A chance to fly or a chance to be invisible (and why): Invisible, I suffer from Acrophobia (an extreme or irrational fear of heights). I would love to love: My parents, they deserve my love more than anyone in this world. Most recent Dream I had: I’m a kid again. Teacher in the school asks to describe a word and I was struggling L If I were to marry today, I would: If the girl is pretty, I would be delighted. If the girl is not so ..., I wouldn’t marry and convince everybody that I’m underage (I’m actually 20 years old). My Dream Girl is/would be: SHEEEE Best F...
    3 comments
    Read more

    27 Simple mehndi designs for hands for Karwa Chauth

    The most  simple mehndi designs for hands  for Karwa Chauth 2014 Karwa Chauth  is around the corner and I am so excited about getting mehndi done! This time I plan to go with a simple yet quirky design. Don’t want my hands full, however it needs to be a style statement for this year’s most awaited festival for us ladies! There are some basic categories of mehndi designs, such as Gujrati, Rajasthani, Marwari,  Arabic  and African  patterns to choose from. They have certain prominent motifs or symbols that distinguishes one from the other. I just can’t seem to stop experimenting with these styles. From  circles to squares , peacocks and paisleys , checks and dots and what not. But my all-time favorite is a simple, curling vine, of course finger tips covered with thick coating of aromatic mehndi (which is so traditional). Quirky patterns include  traditional  as well as non-traditional patterns tweaked to one’s own liking. This includ...
    Post a Comment
    Read more

    Inline Functions and their Uses

    It’s a good practice to divide the program into several functions such that parts of the program don’t get repeated a lot and to make the code easily understandable. We all know that calling and returning from a function generates some overhead. The overhead is sometimes to such an extent that it makes significant effect on the overall speed of certain complex and function-oriented programs. In most cases, we have only a few functions that have extensive use and make significant impact on the performance of the whole program. Not using functions is not an option, using function-like macros is an option, but there is a better solution, to use Inline Functions. Yes, like it sounds, inline functions are expanded at the place of calling rather than being “really called” thus reducing the overhead. It means wherever we call an inline function, compiler will expand the code there and no actual calling will be done. Member functions of classes are generally made inline as in many case...
    Post a Comment
    Read more