contact.html

---
title: Contact
call_to_action: Map
background_image_path:
large_header: false
show_in_navigation: true
navigation_order: 3
map:
  latitude: -45.8787605
  longitude: 170.5027976
  zoom: 13
---

<p>
	Laat je emailadres achter om op de hoogte gehouden te worden van toekomstige projecten.
</p>
<p>
	We informeren jou over aankomende voorleesmomenten en wanneer de crowdfundingcampagne voor <strong>"Samen naar het park"</strong> van start gaat en je het boek met CD kan kopen. 
</p>
<p>
	Werk je op een school of in een bibliotheek? 
	Organiseer je evenementen voor kinderen?
	Een voorleesmoment met live muziek duurt ongeveer een half uurtje, waarbij meerdere sessies op een namiddag mogelijk zijn.
	Bel of mail voor meer informatie.
</p>

<div class="columns">
	<div class="column">
		<p class="editor-link"><a href="cloudcannon:collections/_data/company.yml" class="btn"><strong>&#9998;</strong> Wijzig informatie</a></p>

		{% if site.data.company.contact_phone_number %}
		<label>Telefoon</label>
		<p class="contact-info"><a href="tel:{{ site.data.company.contact_phone_number }}">{{ site.data.company.contact_phone_number }}</a></p>
		{% endif %}

		{% if site.data.company.contact_email_address %}
		<label>Email</label>
		<p class="contact-info"><a href="mailto:{{ site.data.company.contact_email_address }}">{{ site.data.company.contact_email_address }}</a></p>
		{% endif %}

		{% if site.data.company.address %}
		<label>Adres</label>
		<address class="contact-info">{{ site.data.company.address | replace: ',', '<br>' }}</address>
		{% endif %}
	</div>

	<div class="column">
		<form method="post" action="https://formspree.io/{{ site.data.company.contact_email_address }}">
			<label for="email_address">Email*</label>
			<input id="email_address"type="text" name="email" required>

			<label for="name">Naam*</label>
			<input id="name" type="text" name="naam" required>

			<input type="submit" value="Verzend">
		</form>
	</div>
</div>


{% if site.google_maps_javascript_api_key and page.call_to_action == 'Map' %}
	<script>
		window.mapData = {{ page.map | jsonify }};

		function initMap() {
			var myOptions = {
				scrollwheel: false,
				draggable: false,
				panControl: false,
				disableDefaultUI: true,
				styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}],
				zoom: window.mapData.zoom,
				maxZoom: window.mapData.zoom,
				minZoom: window.mapData.zoom,
				center: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude),
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};

			var map = new google.maps.Map(document.getElementById('map'), myOptions);

			var marker = new google.maps.Marker({
				map: map,
				position: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude)
			});

			google.maps.event.addDomListener(window, 'resize', function() {
				map.setCenter(myOptions.center);
			});
		}
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ site.google_maps_javascript_api_key }}&amp;callback=initMap"></script>
{% endif %}