SIA Web Design Library

Embed: Map

No notes defined.

<div class='c-embed c-embed--video'>
    <div class="o-embed 
                    o-embed--1by1
        ">
        <iframe class="o-embed-item" frameborder="0" loading="lazy" src="https://www.google.com/maps/embed/v1/place?q=Dr%20Zorana%20%C4%90in%C4%91i%C4%87a%201%2C%20Novi%20Sad%2021000&key=AIzaSyDwZZBsZ7XWK6KWHGpBrtLBx-uSmqFRmgk"></iframe>
    </div>
</div>
 
<div class='{{ get_component_class( 'embed', display ) }}'>
    <div class="o-embed 
        {% if ratio %}
            o-embed--{{ ratio }}
        {% elseif type == 'map' %}
            o-embed--1by1
        {% else %}
            o-embed--16by9
        {% endif %}">
        {% if type == 'map' %}
            <iframe class="o-embed-item" frameborder="0" loading="lazy" src="https://www.google.com/maps/embed/v1/place?q={{ addressQueryParam }}&key={{ apiKey }}"></iframe>
        {% else %}
            <iframe class="o-embed-item" src="{{ content|strip_debug_comments }}" allowfullscreen=""></iframe>
        {% endif %}
    </div>
</div>
 
{
  "display": {
    "modifiers": [
      "video"
    ]
  },
  "content": "https://www.youtube.com/embed/1hHMwLxN6EM",
  "ratio": "1by1",
  "type": "map",
  "addressQueryParam": "Dr%20Zorana%20%C4%90in%C4%91i%C4%87a%201%2C%20Novi%20Sad%2021000",
  "apiKey": "AIzaSyDwZZBsZ7XWK6KWHGpBrtLBx-uSmqFRmgk"
}