Google Maps

Availability: All contexts

---

The google_maps module displays a Google Map for a specified area. It embeds the map via an iframe, allowing seamless integration into your storefront. The iframe is dynamically generated using the provided coordinates and configuration parameters, ensuring the map shows the intended spot.

Configuration parameters

textHeader

string Text content of a header

levelHeader

string Section level of a header describing the size and importance of the element in a given context. You can read more about heading elements here. We provide the following levels for the header module: - h2 - h3 - h4 - h5 - h6

shouldDisplayHeading

int if set to 1 the header will be displayed

shouldDisplayUnderline

int if set to 1 the header underline will be displayed

displayDescription

int if set to 1 module description will be displayed.

description

string Description of the module. If not specified description won't be displayed.

address

string Place to be displayed on the map. This will be used to generate the map location.

mapHeight

string Height of the map.

Module source code

{% set hasUnderline = moduleConfig.shouldDisplayUnderline == 1 %}

<div class="google-maps">
    {% if moduleConfig.shouldDisplayHeading == 1 and moduleConfig.levelHeader %}
        <{{ moduleConfig.levelHeader }}
            class="header header_{{ moduleConfig.levelHeader }} {% if hasUnderline %} header_underline {% endif %} {{ moduleConfig.classNames }}"
        >
            <span {% if hasUnderline %} class="header_highlight" {% endif %}>
                {{ moduleConfig.textHeader }}
            </span>
        </{{ moduleConfig.levelHeader }}>
    {% endif %}

    {% if moduleConfig.description and moduleConfig.displayDescription == '1' %}
        <div class="grid__col grid__col_xs-12 grid__col_md-10">
            <span class="module__description">{{ moduleConfig.description }}</span>
        </div>
    {% endif %}

    {% if moduleConfig.address %}
        {% set address = moduleConfig.address | url_encode %}

        <iframe 
            src="https://www.google.com/maps?q={{ address }}&output=embed" 
            width="100%" 
            height="{{ moduleConfig.mapHeight }}" 
            loading="lazy" 
            referrerpolicy="no-referrer-when-downgrade"
        >
        </iframe>
    {% endif %}
</div>

Module configuration schema

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "name": "shouldDisplayHeading",
                "type": "checkbox",
                "label": "Display heading",
                "supportsTranslations": true,
                "defaultValue": 0,
                "children": [
                    {
                        "name": "textHeader",
                        "type": "text",
                        "relations": [
                            {
                                "parentName": "shouldDisplayHeading",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": [
                                            "setHiddenAndOptional",
                                            "setDisabled"
                                        ]
                                    },
                                    {
                                        "value": 1,
                                        "actions": [
                                            "setVisibleAndRequired",
                                            "setAvailable"
                                        ]
                                    }
                                ]
                            }
                        ],
                        "label": "Module heading content",
                        "supportsTranslations": true
                    },
                    {
                        "name": "levelHeader",
                        "type": "select",
                        "hint": "The numbers 2 to 6 indicate the hierarchy of headings, with H2 being the most important and H6 being the least. H1 is reserved for the page title. If you need to add a page title, use the \"Page title\" module.",
                        "relations": [
                            {
                                "parentName": "shouldDisplayHeading",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": [
                                            "setHidden",
                                            "setDisabled"
                                        ]
                                    },
                                    {
                                        "value": 1,
                                        "actions": [
                                            "setVisible",
                                            "setAvailable"
                                        ]
                                    }
                                ]
                            }
                        ],
                        "options": {
                            "isWithSearch": 0,
                            "selectOptions": [
                                {
                                    "key": "h2",
                                    "label": "H2"
                                },
                                {
                                    "key": "h3",
                                    "label": "H3"
                                },
                                {
                                    "key": "h4",
                                    "label": "H4"
                                },
                                {
                                    "key": "h5",
                                    "label": "H5"
                                },
                                {
                                    "key": "h6",
                                    "label": "H6"
                                }
                            ]
                        },
                        "label": "Heading level",
                        "defaultValue": "h2"
                    },
                    {
                        "name": "shouldDisplayUnderline",
                        "type": "checkbox",
                        "relations": [
                            {
                                "parentName": "shouldDisplayHeading",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": [
                                            "setHidden",
                                            "setDisabled"
                                        ]
                                    },
                                    {
                                        "value": 1,
                                        "actions": [
                                            "setVisible",
                                            "setAvailable"
                                        ]
                                    }
                                ]
                            }
                        ],
                        "label": "Add underline below the heading",
                        "defaultValue": 0
                    }
                ]
            },
            {
                "type": "checkbox",
                "name": "displayDescription",
                "label": "Display additional description below the heading",
                "defaultValue": 0,
                "children": [
                    {
                        "type": "textarea",
                        "name": "description",
                        "label": "Description",
                        "supportsTranslations": 1,
                        "relations": [
                            {
                                "parentName": "displayDescription",
                                "parentValueToActionsMap": [
                                    {
                                        "value": 0,
                                        "actions": ["setHidden", "setDisabled"]
                                    },
                                    {
                                        "value": 1,
                                        "actions": ["setVisible", "setAvailable"]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "type" : "textarea",
                "name" : "address",
                "supportsTranslations" : true,
                "label" : "Name and location address on the Google Maps",
                "isRequired" : true,
                "isHidden" : false
            },
            {
                "type": "number",
                "name": "mapHeight",
                "isRequired": true,
                "supportsTranslations": true,
                "label": "Map height",
                "defaultValue": 450,
                "validators": [
                    { "type": "int" },
                    { "type": "greaterEqThan", "options": { "min": 0} }
                ],
                "options": {
                    "postfix": "px"
                }
            }
        ]
    }
]