Examples

add_route

Add a route to your current maps tag

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
	width="100%"
	fit_map:routes="yes"
}
	{maps:add_route
		address:from="heerde"
		address:to="apeldoorn"
		latlng:waypoints="52.3480,5.9870"
	}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Route Tag

{exp:reinos_maps:route 
    address:from="Rotterdam" 
    address:to="Amsterdam" 
    latlng:waypoints="52.2112,5.9699|52.5168,6.0830"
}
	direction:distance : {direction:distance}<br>
	direction:duration : {direction:duration}<br>
    direction:start_location : {direction:start_location}<br>
    direction:end_location : {direction:end_location}<br>
	
	<br>
	Steps: <br>
	{direction:steps}
		direction:steps:distance : {direction:steps:distance} <br>
		direction:steps:duration : {direction:steps:duration} <br>
		direction:steps:location : {direction:steps:location} <br>
		direction:steps:instruction : {direction:steps:instruction} <br>
		direction:steps:travel_mode : {direction:steps:travel_mode} <br>
		<br>
	{/direction:steps}
{/exp:reinos_maps:route}

Route planner

The route planner with the built-in HTML, translated with the label: and text: params. See Route planner.

{exp:reinos_maps:html_header}
{exp:reinos_maps:map width="100%" height="400px"}
	{maps:add_marker address="Utrecht Centraal"}
	{maps:route_planner
		address:to="Utrecht Centraal"
		travel_modes="cycling|walking|driving"
		lang="nl"
		label:from="Van"
		label:locate="Gebruik mijn locatie"
		label:cycling="Fiets"
		label:walking="Lopen"
		label:driving="Auto"
		label:submit="Plan route"
		text:summary="[distance] in [duration]"
	}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Route planner with your own HTML

The planner in a sidebar next to the map, with a select for the travel mode and a template per step (markup="no", see Your own HTML). The events show the route below the planner.

{exp:reinos_maps:html_header}

<style>
	.planner-layout { display: flex; gap: 2em; align-items: flex-start; }
	.planner-layout aside { flex: 0 0 320px; }
	.planner-layout main { flex: 1; }
</style>

<div class="planner-layout">
	<aside>
		<div id="planner">
			<form data-maps-route-form>
				<input name="from" placeholder="Waar kom je vandaan?" required>
				<button type="button" data-maps-route-locate hidden>📍 Mijn locatie</button>
				<select name="travel_mode">
					<option value="cycling">Fiets</option>
					<option value="walking">Lopen</option>
				</select>
				<button>Plan route</button>
			</form>
			<p data-maps-route-status></p>
			<div data-maps-route-result hidden>
				<h3><span data-maps-route-distance></span> · <span data-maps-route-duration></span></h3>
				<ul data-maps-route-steps>
					<template data-maps-route-step>
						<li><strong data-maps-route-step-instruction></strong> <em data-maps-route-step-distance></em></li>
					</template>
				</ul>
				<a data-maps-route-link="google" target="_blank" rel="noopener">Open in Google Maps</a>
			</div>
		</div>
	</aside>
	<main>
		{exp:reinos_maps:map width="100%" height="500px"}
			{maps:add_marker address="Domplein, Utrecht"}
			{maps:route_planner address:to="Domplein, Utrecht" travel_modes="cycling|walking" id="planner" markup="no" lang="nl"}
		{/exp:reinos_maps:map}
	</main>
</div>

<p id="route-events"></p>
<script>
	document.addEventListener('maps:route:loaded', function (event) {
		document.getElementById('route-events').textContent = event.detail.route.distance + ', ' + event.detail.route.duration;
	});
	document.addEventListener('maps:route:error', function (event) {
		document.getElementById('route-events').textContent = event.detail.error;
	});
</script>

{exp:reinos_maps:html_footer}