Google Add-ons add new capabilities to Google Docs and Sheets. This video tutorial explains how you can create your own Google add-ons using HTML, CSS and JavaScript.

You have seen examples of some really useful add-ons for Google Docs but wouldn’t it be great if you could write your own add-on, one that adds new features to your Google Docs, one that makes you a rock star among the millions of Google Docs users.

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.

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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>