The method described below is an advanced solution for highly customizable maps. There is nowadays an easier way to add a map card to your carousel ads with a single click: read more about map cards in carousel ads.

Google Maps Static API requires the usage of API key when calling the API, and you need to add it to the example urls below (&key=YOUR_API_KEY). You can create an API key here.

In addition to creating an API key, Google asks for a Digital Signature. However you don't have to use this,  instead you can select this API key to "allow unsigned usage".

In order to use API key's Google Cloud Platform needs your organization's billing details but the Static Maps API is free up to 100,000 requests per month. More about the pricing can be found here https://cloud.google.com/maps-platform/pricing/sheet/.

Would you like to dynamically add a map card to your carousel ads to show where your products are available? Let us show you how easy it is using Smartly.io + Google Maps.

Let's use this test feed (you can copy paste the link and add it to your Smartly.io account for testing) https://docs.google.com/spreadsheets/d/1ypuCnCu7FkmYAJz6EnbVa8X0cfS7PnfiX9HGZLToFKA/pub?gid=0&single=true&output=csv

Google has a powerful feature, able to generate an image from a map https://maps.googleapis.com/maps/api/staticmap?center=New%20York&size=640x640&zoom=15&key=ADD_YOUR_API_KEY Generates a static image. So all we have to do is dynamically fill part of this address to automatically generate precise maps based on location specified in the feed.

Dynamic Image Templates using Google Maps

Let's build for example a carousel card displaying a map, generated automatically based on the city provided in the product catalog.

1. Create a new Dynamic Image Template (Carousel format)
2. Add a Dynamic Image Layer
3. Select "Use custom image URL format"

1. Add a URL similar to this https://maps.googleapis.com/maps/api/staticmap?center=#city#&size=640x640&zoom=15&key=YOUR_API_KEY and make sure to replace #city# with the correct field in your product catalog.
2. Resize the image as large as you want

Your Image Template should look like this

Showing a map in a carousel ad

It's very easy to show just maps on your carousels. All you have to do is to create an Automated Ads campaign and select the image template we just created and applied to all products.

But let's go a level up. Let's create an automated ads campaign that will

• Group products available in the same city in one ad set
• Display 3 products from that city (ordered by Google Checkout for example)
• Place a map as the last card of the carousel, generated automatically with the information from the product catalog

When selecting the feed, select the cities you want to use and how you want to order the products. In this case, we are about to create two audiences, New York and Boston, selecting top products based on Google Analytics data.

In the campaign tab, select Group ads into ad sets based on product category. In this case, we are selecting city as the field to group product by. In practice, products available in the same city will be grouped under the same ad set.

Now select an image template ( or the image from the feed ) and apply it to all product. This will generate several cards using the products available in the feed.

Add a new card, to apply to 1 product, and select the image template we created in the beginning, the one to generate a static map.

Remove all geo targeting, scroll the Audience tab till the end and select Location targeting and map the field from your product catalogue with the correct geo targeting. Here we mapped the cities with the field city in our product catalogue.

You might want to go back to your Ad template, and personalize the carousel leveraging the power of Smartly.io Macros.

Here how the two creatives will look like

Example using zip code targeting

Example using a street address

Example using famous landmarks

In Image Templates you can add a pin to point into a specific location and use centering so it'll point to the correct spot.

Styling examples

Let's take this URL as an example:

• https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&center=US:94123&zoom=15
• &size=600x314&scale=2 - bypass Google's 1000x1000 restriction to create a 1200x628 link ad sized map
• &style=feature:poi.business|element:labels|visibility:off - hide business names
• &style=feature:water|element:geometry.fill|color:0xa6cbe3 - change the color of water
• &style=feature:road|element:labels.text.fill|color:0x41626a - change the color of road name labels
• &style=feature:road|element:geometry.fill|color:0xedf3f5 - change the color of roads
• &style=feature:road|element:geometry.stroke|visibility:off - don't draw borders of roads
• &style=feature:landscape.man_made|element:geometry.fill|color:0xd6e2e6 - change color of man-made areas

Here’re the full styling instructions with more examples.

Changing the map language

To change the map's language, you need to add a language URL parameter. Do this by adding &language=en to the map URL, where "en" is the two letter language code that you wish to display the map in. The example, "en", refers to English.

Useful links

• https://developers.google.com/maps/documentation/maps-static/overview
• https://mapstyle.withgoogle.com/ (it requires a bit of hacking though to get the styles to the map URL).
• https://www.mapbox.com/ a great alternative for Google Maps and offers even more flexibility and also higher resolution pictures.