This is the only way to add a map for Email and Print context. And really, it’s very straightforward to add the map itself to your template.

As with most APIs on the web, Google Maps Static API has limitations on the number of calls that can be made to it for free. Beyond these limits, maps will not show up in your template unless you purchase a business plan. See more details. Furthermore, by using the Google Maps API you are subject to their terms and conditions. Objectif Lune, Inc is not responsible for any use of software that may go against the Google T&C.

Step 1: Getting the appropriate link

First up, getting the link that will display the image. Essentially, you need to build a URL that will retrieve the map image from Google’s server and display it in your template.

It’s beyond the scope of this document to explain each option available in the API, so here’s a link that can get you started: https://developers.google.com/maps/documentation/static-maps/intro

Don’t forget to grab your Maps API Key, by clicking Get a Key on this page. You’ll need it in the URL.

Step 2: Insert into your template

Once you have the completed link for the map you want to show, it’s time to insert it into your template. To do this, simply click on the Insert Image from Address… button in the toolbar, or from the menu click on Insert, Image, From Address…

The dialog that appears lets you enter a remote URL, and this is where you can paste the one you built in the previous step. For example, here’s a map centered on Montreal, Quebec: https://maps.googleapis.com/maps/api/staticmap?center=Montreal,QC&zoom=12&size=640x550&key=<your api key>

When going into Preview mode, the image should appear on the page. Obviously, using the API documentation, you can change this map’s size, zoom, location, add markers and paths, etc.

Because each image is obtained from the Google Maps API server, the Connect server will require an Internet access to be able to show these images. Additionally, obtaining images from the web can slow down the Output process since each record requires a web request. Thankfully, Google’s servers are really fast, but you will still see output speed reduction!

Interactive maps will only work on Web output, and cannot be output on Print or Email contexts (even though they will show up in Preview mode!).

There are different API types available, in this example we’ll use the Google Maps Embed API, which is the simplest to embed but also the slowest to process.

Note: Alternatively you could try using the Google Maps JavaScript API.

Step 1: Obtaining the API key

Please see Step 1 of the previous section to obtain your API key.

Step 2: Inserting the iframe code

Because the code for the Embed API is a simple <iframe>, the only required step in the template is to paste in the following code (remember to insert your API key in the appropriate location!)

<iframe width="600" height="450" frameborder="0" style="border:0"
	 src="https://www.google.com/maps/embed/v1/view?zoom=16&center=45.5504%2C-73.5427&key=[Your API Key]" allowfullscreen></iframe>

It’s possible to adjust the size of the map using the <iframe> attributes, and to change the location and zoom power using the URL attributes. Use the map builder to help you out and see other possibilities for this map!