Cacher is the code snippet organizer for pro developers

{% extends 'components/common/master/template.twig' %}

{% block content %}

	{% include 'components/page/banner/template.twig' with banner %}
	
	<div class="c-filter-bar">
		<input class="c-filter-bar__mob-checkbox" id="c-filter-bar__mob-checkbox" name="c-filter-bar__mob-checkbox" type="checkbox">
		<label class="c-filter-bar__mob-label" for="c-filter-bar__mob-checkbox">Menu</label>
		<div class="c-filter-bar__expanded">
			<ul>
				{% if fromUntil is defined and fromUntil is not empty %}
					<li id="c-filter-bar__from-until" class="c-filter-bar__from-until">
						<span class="c-filter-bar__from-until-trigger">
							<span class="from-date">I'm visiting from</span>
							<span class="arrow"></span>
							<span class="to-date">Until</span></span>

						<div id="jrange" class="dates">
							<input />
							<div></div>
						</div>
						<form id="date_filter_form" method="POST">
							<input id="from_date_input" name="from_date_input">
							<input id="to_date_input" name="to_date_input">
						</form>
					</li>
				{% endif %}

				{% if filters is defined and filters is not empty %}
					<li id="c-filter-bar__filters" class="c-filter-bar__filters">
						<a id="filters-toggle" href="#" class="c-filter-bar__filters-label">Filters</a>
					</li>
				{% endif %}

				{% for item in items %}
					<li><a id="{{ item.id }}" href="{{ item.link }}">{{ item.title }}</a></li>
					{% endfor %}
			</ul>
		</div>
	</div>
			
			
	{% if filters is defined and filters is not empty %}
		<div class="c-filter-bar__filters-expanded">
			<div class="c-filters">
				{% for filter in filters %}
					<div class="c-filters__row">
						{% if filter.title is defined and filter.title is not empty %}
							<h2 class="c-filters__row-title">
								{{ filter.title }}
							</h2>
						{% endif %}
						
						{% if filter.intro is defined and filter.location is not empty %}
							<div class="c-filters__row-info c-std c-std--large">
								{{ filter.intro }}
							</div>
						{% endif %}
						
						{% if filter.facet is defined and filter.facet is not empty %}
							<div class="c-filters__row-filters">
								{{ filter.facet }}
							</div>
						{% endif %}
					</div>
				{% endfor %}
				
				<a id="apply-filters" href="#" title="Apply filters" class="c-button">
					<span>Apply filters </span>
				</a>
			</div>
		</div>
	{% endif %}

	<div class="facetwp-template">
		<div class="c-map-page">
			<div id="map"></div>
		</div>
	</div>

	<script>
		function initMap() {
			var mapEl = document.getElementById('map');
			var map = new google.maps.Map(mapEl, {
				zoom: 14,
				center: new google.maps.LatLng(51.066650, - 1.317080),
				mapTypeId: 'roadmap',
				scrollwheel: false,
				mapTypeControl: false,
				streetViewControl: false
			});

			var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
			var icons = {
				{% for markerIcon in markerIcons %}
					{% if loop.last %}
						"{{ markerIcon.type }}": {
						icon: '{{ markerIcon.image }}'
						}
					{% else %}
						"{{ markerIcon.type }}": {
						icon: '{{ markerIcon.image }}'
						},
					{% endif %}
				{% endfor %}
			};

	/*
			 * Create array of objects containing everything needed for the markers
			 */
			var features = [
				{% for marker in markers %}
					{% if marker.type is defined and marker.type is not empty %}
						{% if loop.last %}
							{
								position: new google.maps.LatLng({{ marker.lat }}, {{ marker.lng }}),
								type: "{{ marker.type }}",
								content: "<div class=\"c-map__marker-content\">{% if marker.title %}<h3>{{ marker.title }}</h3>{% endif %}{% if marker.locality %}<h4>{{ marker.locality }}</h4>{% endif %}{{ marker.content|raw }}</div>",
								{% if marker.contentImage %}
									contentImage: "<div class=\"c-map__marker-image\" style=\"background-image: url({{ marker.contentImage|raw }})\"><div class=\"e-pill-tag e-pill-tag--category {{ marker.categoryClass|raw }} c-map__marker-category\"><span>{{ marker.categoryTitle|raw }}</span></div></div>"
								{% endif %}
								}
						{% else %}
							{
								position: new google.maps.LatLng({{ marker.lat }}, {{ marker.lng }}),
								type: "{{ marker.type }}",
								content: "<div class=\"c-map__marker-content\">{% if marker.title %}<h3>{{ marker.title }}</h3>{% endif %}{% if marker.locality %}<h4>{{ marker.locality }}</h4>{% endif %}{{ marker.content|raw }}</div>",
								{% if marker.contentImage %}
									contentImage: "<div class=\"c-map__marker-image\" style=\"background-image: url({{ marker.contentImage|raw }})\"><div class=\"e-pill-tag e-pill-tag--category {{ marker.categoryClass|raw }} c-map__marker-category\"><span>{{ marker.categoryTitle|raw }}</span></div></div>"
								{% endif %}
								},
						{% endif %}
					{% endif %}
				{% endfor %}
			];

			/*
			 * Loop through each item in the 'features' array, including info windows, and display the marker
			 */
			features.forEach(function (feature) {
				var marker = new google.maps.Marker({
					position: feature.position,
					icon: icons[feature.type].icon,
					map: map
				});
				var info = new SnazzyInfoWindow ({
					marker: marker,
					content: feature.contentImage + feature.content
				});
				marker.addListener('click', function() {
					info.open();
					});
			});
		} // initMap()

		initMap();


	</script>
{% endblock %}