<section id="map-section" class="hidden">
  <div class="tui-container">
    <header class="flex-container">
      <h2>{{getResource fields.resource.fields.items 'mapHeading'}}</h2>
      <a href="{{dpUrlResolver fields.content.links.map}}" class="dp-sub-page open-tui-modal" data-id="map">
        {{>icon_svg name='map'}}
        {{getResource fields.resource.fields.items 'showLargeMap'}}
      </a>
    </header>
    <div class="map-content map-fullwidth">
      <picture>
        <source media="(max-width: 768px)" data-srcset="https://maps.googleapis.com{{staticMapsURLSigner "/maps/api/staticmap?size=386x300&client=gme-tuitravelplc" "7PvxAVRMPfqWHLUiEoFpHL3AyKs=" fields.content.childCoordinates "cdr" 0 @root/meta}}">
        <source media="(max-width: 992px)" data-srcset="https://maps.googleapis.com{{staticMapsURLSigner "/maps/api/staticmap?size=732x400&client=gme-tuitravelplc" "7PvxAVRMPfqWHLUiEoFpHL3AyKs=" fields.content.childCoordinates "cdr" 0 @root/meta}}">
        <source media="(max-width: 1200px)" data-srcset="https://maps.googleapis.com{{staticMapsURLSigner "/maps/api/staticmap?size=956x500&client=gme-tuitravelplc" "7PvxAVRMPfqWHLUiEoFpHL3AyKs=" fields.content.childCoordinates "cdr" 0 @root/meta}}">
        <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
          data-src="https://maps.googleapis.com{{staticMapsURLSigner "/maps/api/staticmap?size=1188x590&client=gme-tuitravelplc" "7PvxAVRMPfqWHLUiEoFpHL3AyKs=" fields.content.childCoordinates "cdr" 0 @root/meta}}"
          alt="{{getResource data.fields.resource.fields.items 'mapsHeading - {{fields.content.name}}'}}">
      </picture>
    </div>
  </div>
</section>
