2017-02-09 22:31:59 +00:00
|
|
|
{% extends "base.html" %}
|
|
|
|
{% load wagtailimages_tags %}
|
|
|
|
|
2017-02-11 20:24:23 +00:00
|
|
|
{% block head-extra %}
|
|
|
|
<style>
|
2017-02-10 13:27:10 +00:00
|
|
|
/* Needed for Google map embed */
|
|
|
|
#map {
|
|
|
|
height: 100%;
|
|
|
|
}
|
2017-02-11 20:24:23 +00:00
|
|
|
.maps.embed-container {
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
2017-02-10 13:27:10 +00:00
|
|
|
html, body {
|
|
|
|
height: 100%;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
2017-02-11 20:24:23 +00:00
|
|
|
</style>
|
|
|
|
{% endblock head-extra %}
|
2017-02-10 13:27:10 +00:00
|
|
|
|
2017-02-11 20:24:23 +00:00
|
|
|
{% block content-header %}
|
2017-02-09 22:31:59 +00:00
|
|
|
<h1>{{ page.title }}</h1>
|
|
|
|
<figure>
|
|
|
|
{% image self.image fill-600x600 %}
|
|
|
|
</figure>
|
2017-02-11 20:24:23 +00:00
|
|
|
{% endblock content-header %}
|
|
|
|
|
|
|
|
{% block content-body %}
|
2017-02-11 23:46:53 +00:00
|
|
|
<p>{{ page.address|linebreaks }}</p>
|
2017-02-11 20:24:23 +00:00
|
|
|
<div id="map" class="maps embed-container"></div>
|
2017-02-11 23:46:53 +00:00
|
|
|
|
|
|
|
{% for hours in page.opening_hours %}
|
|
|
|
<li>{{ hours }}</li>
|
|
|
|
{% endfor %}
|
|
|
|
|
2017-02-10 13:27:10 +00:00
|
|
|
<script>
|
|
|
|
var map;
|
|
|
|
function initMap() {
|
|
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
|
|
center: {
|
|
|
|
lat: {{lat}},
|
|
|
|
lng: {{long}}
|
|
|
|
},
|
|
|
|
zoom: 8
|
|
|
|
});
|
2017-02-10 14:10:43 +00:00
|
|
|
var marker = new google.maps.Marker({
|
|
|
|
position: {
|
|
|
|
lat: {{lat}},
|
|
|
|
lng: {{long}}
|
|
|
|
},
|
|
|
|
map: map,
|
|
|
|
title: '{{page.title}}'
|
|
|
|
});
|
2017-02-10 13:27:10 +00:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD31CT9P9KxvNUJOwDq2kcFEIG8ADgaFgw&callback=initMap" async defer></script>
|
|
|
|
|
2017-02-11 20:24:23 +00:00
|
|
|
{% endblock content-body %}
|