---
title: Location page
layout: tui-ssg-template-layout.hbs
bodyClass: location
dataBaseUrl: /pages/templates/sg-location-page.html
---

<main class="main-content">

  <section>
    <div class="tui-container">
      {{>bread_crumb country}}
      {{>location_header country.data.fields.content resourceObject=country.data.fields.resource.fields.items}}
      {{>tui_sub_navigation country pageType='overview'}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      {{>tickets tickets=tic-4.tickets heading="Location Cards"}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      <div class="img-map-two-columns clearfix">
        <div class="img-map-left-column">
          {{>overview_image country.data}}
        </div>
        <div class="img-map-right-column">
          {{>overview_map country.data market=country.meta.market}}
        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="tui-container">
      {{>tui_facts country.data}}
    </div>
  </section>

  <section>
    <div class="tui-container">
{{>multi_column country heading=(getResource country.data.fields.resource.fields.items 'tripsTo' country.data.fields.content.name)}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      <header class="flex-container location-cards-heading">
        <h2 id="resmal">{{getResource country.data.fields.resource.fields.items 'ourResorts'}}</h2>
        <div class="show-on-map">
          <a href="{{dpUrlResolver country.data.fields.content.links.map}}" class="dp-sub-page open-tui-modal" data-id="map">
            {{>icon_svg name='location'}}
            {{getResource country.data.fields.resource.fields.items 'showOnMap'}}
          </a>
        </div>
      </header>
      {{>location_card_group locationCards=country.data.fields.locations showAll=(getResource country.data.fields.resource.fields.items 'locationListShowAll')  resourceObject=country.data.fields.resource.fields.items}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      <header class="list-header">
        <h2>Resetyper i {{country.data.fields.content.name}}</h2>
      </header>
      {{>quick_links country.data.fields.collectionPages}}
    </div>
  </section>

  <section>
    <div class="tui-container">
      <p>
        <a href="/pages/templates/sg-hotel-page.html" class="open-tui-modal" data-modal-type="hotel-modal" data-id="hotel">
          {{>icon_svg name='hotel-signpost'}}
          Öppna hotell i lightbox
        </a>
      </p>
      {{>hotel_list}}
    </div>
  </section>

</main>

{{>map_config country-map}}
<script>
  function downloadLocationMapAtOnload() {
    var element = document.createElement('script')
    element.async = true
    element.defer = true
    element.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBnY3TvI8MED2KO3KsEWI27y-kdWie0NbE&channel=Blue{{upcase market}}&callback=TuiLocationMap.initMap'
    document.body.appendChild(element)
  }

  if (window.addEventListener) {
    window.addEventListener('load', downloadLocationMapAtOnload, false)
  }
  else if (window.attachEvent) {
    window.attachEvent('onload', downloadLocationMapAtOnload)
  }
  else {
    window.onload = downloadLocationMapAtOnload
  }
</script>
<script defer src="https://www.tui.se/widgets/assets/javascripts/hotel-list.js"></script>