Maps
Bonzai avatar
Written by Bonzai
Updated over a week ago

You can use a map element when you want to target your audience based the location of the visitors.
In the properties tab, on the right panel, you can edit the following properties of the text element:

General

Map: Displays the name of the map element. You can change the name of the map element by selecting it and entering the desired name.

Position of Map Element: You can define the positioning of the element on the canvas. The positioning of the element is relative to the canvas.

In the screenshot, the map element is placed at Zero pixels from the left edge and the top edge. It implies that the element is placed at the top left corner of the canvas.

Note: While manually entering the values for positioning, you cannot enter decimal values.

Map Element’s Height & Width: You can resize an element by dragging the corner handles of the element. Alternatively, you can enter the size of the element on the size fields.

Note: While manually entering the values for resizing, you cannot enter decimal values.

Select the lock icon to keep the aspect ratio locked when resizing the map element.

Rotation: You can rotate the map element by using the rotate lever or entering the value in the angle field.

Note: The angle field displays values from 0 to 360 when the icon is rotated. While using the rotation feature to animate the text element, values must be entered in multiples of 360 to signify how many times the rotation must happen.

Opacity: You can change the opacity of the map element by dragging the slider.

Data Source

Google Map API Key: Every time you use Google Maps APIs you must include a key to validate your request.

​Search & Excel Upload:

Select the source from which you want the results to be extracted. You have the following two options:

  • Search: The Search option allows you to fetch results by typing in brand, address, latitude, longitude, location, or a combination of these values in the Enter a query field. The map element displays the location pin on the map.

  • Excel File: The Excel File option allows you to download the template and manually upload details such as Address, Latitude, Longitude, Contact Number, and Website URL to fetch results.

o To download the template, click the download template icon.

o To upload the updated template, click the upload icon.

Important: You cannot upload any excel sheet. Only the downloaded template can be used to for successful processing.

Note: You can rename the template for your convenience and upload it.

Once you have uploaded the excel file, the upload and download template icons change to download the uploaded file, replace the uploaded file, and download template icons.

Display

Brand Color

Allows you to change the color of the location pin on the map.

Behavior

Keep initial state as hidden: Keeps the initial state of the map element as hidden until a configured action is not performed. You can configure the action on the Events tab.

Show User's location: Selecting this option, shows the map user’s location and the Store location in the map. It allows users to know the distance between their current location and the store.

Note: IP address of the device in which the creative is rendered is used to find the user’s current address.

Example: In the following example, the user’s location is marked by the blue pin, whereas the store location is marked by the red pin.

Show in a view: Displays the specified number of stores in a specified kilometer radius.

Note: By default, the number of stores to be displayed is set to 50, and the radius for the search is set at 5 kilometers from the user’s location.

Example: In the following example, a search for Mc Donalds at a distance of 5 kms from the users location gives 3 stores.

To change the values for Stores and Radius, click on the respective fields and enter a value greater than zero (0).
To change the unit of distance from kms to miles, click the units drop down list and select miles.

Enable Street View: Allows you to enable Google Street view for the map element. This view can be used by the end user to have a 3 Dimensional view of the place where the store is located or in some cases to view how the store looks actually from the inside.

By default, the places in the map are displayed in English. To change the language, click the Language drop down list and select a language.

The map element supports all the languages that google map supports.

Position

Position of the element: Position refers to the position of the text element on the art-board. Pinning an element to an edge instructs that element to move as the edge itself moves. When an element is pinned to non-opposing edges on the art-board, the distance of the element from those edges of art-board remains fixed or proportional.

  • Float : When selected, the position of the element on the art-board is fixed such that when the rendered creative size is increased or decreased, the element is placed proportionately. For example, in a 1000 px wide art-board if an element is placed at 200px from the left edge, then in a 2000 px wide art-board the element will be placed 400px away from the left edge.

  • ​Fixed: When selected, the position of the element is fixed from the edges irrespective of the size of the rendered creative. For example, if an element is pinned 10 pixels away from the top and the left edge, as the art-board size changes, the position of the element will still be 10 pixels away from the top and the left edge.

Dimension

Dimension refers to the fluidity or the fixity of the element container. You can control the resizing aspect of any element by using the two arrows in the Dimension section. When the size of the document changes, the width and height of the element container also changes. If you enable either or both the arrows, the container of the element changes accordingly in height and width. By default, both the arrows are enabled.

To change the dimension of the element in the rendered creative, perform the following:

  • To enable resizing the height of the element, click the up-down arrow.

  • To enable resizing the width of the element, click the left-right arrow.

Did this answer your question?