map-template.twig
{% 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 %}