{% set attributes = attributes|default(create_attribute()) %}
{% set wrapper_attributes = wrapper_attributes|default(create_attribute()) %}
{% set dir_attributes = dir_attributes|default(create_attribute()) %}
{% set load_dynamic = load_dynamic|default(false) %}
{% set load_directions = load_directions|default(false) %}

{% set attributes = attributes.setAttribute('id', 'load-dynamic-map') %}
{% set dir_attributes = dir_attributes.setAttribute('id', 'load-directions') %}
{% set wrapper_attributes = wrapper_attributes.setAttribute('id', 'google-map') %}
<meta name="map-address" content="{{ map_address }}">

<div {{ wrapper_attributes }}>
  <iframe width="100%" class="map"
          src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=Hoddesdon%20EN11%200EG,%20United%20Kingdom+()&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>

  {% if load_dynamic %}
    {% include '@atoms/form/button/button.twig' with {
      'text': 'Load dynamic map',
      'attributes': attributes,
      'outline': true,
      'expanded': true
    } %}
  {% endif %}
  {% if load_directions %}
    {% include '@atoms/form/button/button.twig' with {
      'text': 'Directions from nearest station to Rye House Gatehouse',
      'url': directions_url,
      'attributes': dir_attributes,
      'outline': true,
      'expanded': true,
      'icon': 'map-signs',
      'icon_position': 'left'
    } %}
  {% endif %}
</div>
