{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Google Maps
{% endblock %}

{% block css %}{% endblock %}

{% block pagetitle %}
	{{ include('partials/page-title.html.twig', { sub_title: 'Maps', page_title: 'Google Maps' }) }}
{% endblock %}

{% block body %}

	<div class="row">
		<div class="col-xl-6">
			<div class="card">
				<div class="card-body">
					<h4 class="header-title mb-3">Basic Google Map</h4>
					<div id="gmaps-basic" class="gmaps"></div>
				</div>
				<!-- end card-body-->
			</div>
			<!-- end card-->
		</div>
		<!-- end col-->
		<div class="col-xl-6">
			<div class="card">
				<div class="card-body">
					<h4 class="header-title mb-3">Markers Google Map</h4>
					<div id="gmaps-markers" class="gmaps"></div>
				</div>
				<!-- end card-body-->
			</div>
			<!-- end card-->
		</div>
		<!-- end col-->
	</div>
	<!-- end row-->

	<div class="row">
		<div class="col-xl-6">
			<div class="card">
				<div class="card-body">
					<h4 class="header-title mb-3">Street View Panoramas Google Map</h4>
					<div id="panorama" class="gmaps"></div>
				</div>
				<!-- end card-body-->
			</div>
			<!-- end card-->
		</div>
		<!-- end col-->
		<div class="col-xl-6">
			<div class="card">
				<div class="card-body">
					<h4 class="header-title mb-3">Google Map Types</h4>
					<div id="gmaps-types" class="gmaps"></div>
				</div>
				<!-- end card-body-->
			</div>
			<!-- end card-->
		</div>
		<!-- end col-->
	</div>
	<!-- end row-->

	<div class="row">
		<div class="col-xl-6">
			<div class="card">
				<div class="card-body">
					<h4 class="header-title mb-3">Ultra Light with Labels</h4>
					<div id="ultra-light" class="gmaps"></div>
				</div>
				<!-- end card-body-->
			</div>
			<!-- end card-->
		</div>
		<!-- end col-->
		<div class="col-xl-6">
			<div class="card">
				<div class="card-body">
					<h4 class="header-title mb-3">Dark</h4>
					<div id="dark" class="gmaps"></div>
				</div>
				<!-- end card-body-->
			</div>
			<!-- end card-->
		</div>
		<!-- end col-->
	</div>
	<!-- end row-->

{% endblock %}

{% block javascript %}
	<!-- Google Maps API -->
	<script src="https://maps.google.com/maps/api/js"></script>
	<script src="/vendor/gmaps/gmaps.min.js"></script>

	<!-- Google Maps Demo js -->
	<script src="/js/pages/demo.google-maps.js"></script>
{% endblock %}
