<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<div class="trip-ideas-map" data-module="tripIdeasMap" data-map-key="">
    <div class="trip-ideas-map-navigation js-map-navigation">
        <div class="trip-ideas-map-navigation__sidebar js-trip-ideas-sidebar">
        </div>
        <div class="trip-ideas-map-navigation__day-picker js-trip-ideas-day-picker">
            <div class="grid-x grid-padding-x">
                <div class="day-picker cell">
                    <a href="#" class="js-day-items-close-trigger day-picker__close-items"></a>
                    <div class="day-picker__heading">
                        <h4 class="day-picker__title">Day <span class="js-title-day"></span></h4>
                        <div class="day-picker__buttons-container">
                        </div>
                    </div>
                    <div class="day-picker__carousel carousel">
                        <div class="day-picker__track carousel__track">
                            <div class="day-picker__bounds carousel__bounds"></div>
                            <div class="day-picker__draggable carousel__draggable"></div>
                        </div>
                        <div class="day-picker__slider carousel__slider">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="trip-ideas-map__map" id="map"></div>
    <div class="trip-ideas-map-days-container">
        <a href="#" class="js-day-items-close-trigger trip-ideas-map-days-container__close-items"></a>
    </div>
</div>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<div class="trip-ideas-map" data-module="tripIdeasMap" data-map-key="{{key}}">
    {{> @cp-trip-ideas-sidebar}}
    <div class="trip-ideas-map__map" id="map"></div>
    <div class="trip-ideas-map-days-container">
        <a href="#" class="js-day-items-close-trigger trip-ideas-map-days-container__close-items"></a>
        {{#each days}}
        <div class="trip-ideas-map-day" id="day{{@index}}" data-longitude="{{location.longitude}}" data-latitude="{{location.latitude}}">
            {{> @cp-medium-image responsiveImage}}
            <div class="trip-ideas-map-day__eyebrow">
                <span class="trip-ideas-map-day__day-name">{{dayName}}</span><span class="trip-ideas-map-day__from-location">{{fromLocation}}</span>
            </div>
            <div class="trip-ideas-map-day__content">
                <h2 class="trip-ideas-map-day__title">{{title}}</h2>
                <p class="trip-ideas-map-day__subtitle">{{subtitle}}</p>
                {{#if dayItems.length}}
                {{> @cp-button-primary text=ctaText url="#" modifier="with-arrow" cssClasses="js-day-items-open-trigger trip-ideas-map-day__cta"}}
                {{/if}}
            </div>
            {{#if dayItems.length}}
            <div class="trip-ideas-map-day-items">
                {{#each dayItems}}
                <div class="trip-ideas-map-day-item" data-longitude="{{location.longitude}}"
                     data-latitude="{{location.latitude}}">
                    <div class="trip-ideas-map-day-item__caption">
                        {{#if caption.location}}<span class="trip-ideas-map-day-item__location-icon"></span>
                        <p class="trip-ideas-map-day-item__location">{{caption.location}}</p>{{/if}}
                        {{#if caption.description}}<p class="trip-ideas-map-day-item__description">
                            {{caption.description}}
                        </p>{{/if}}
                    </div>
                    <h3 class="trip-ideas-map-day-item__title">{{title}}</h3>
                    <div class="trip-ideas-map-day-item__image">
                        {{> @cp-medium-image responsiveImage}}
                    </div>
                    <p class="trip-ideas-map-day-item__subtitle">{{{subtitle}}}</p>
                </div>
                {{/each}}
            </div>
            {{/if}}
        </div>
        {{/each}}
    </div>
</div>
/* No context defined for this component. */

There are no notes for this item.