<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Google')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Maps', 'title' => 'Google')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Maps', 'title' => 'Google')) ?>

                    <div class="container-fluid">
<div class="grid grid-cols-1 gap-base">
<div class="grid xl:grid-cols-2 gap-base">
<div class="card">
<div class="card-header block">
<h5 class="card-title mb-1.25">Basic Google Map</h5>
<p class="text-default-400">Displays a basic embedded Google Map.</p>
</div>
<div class="card-body">
<iframe src="https://www.google.com/maps/embed/v1/place?q=Eiffel+Tower&amp;key=AIzaSyBSFRN6WWGYwmFi498qXXsD2UwkbmD74v4" style="width: 100%; height: 360px; overflow: hidden; border: 0"></iframe>
</div>
</div>
<div class="card">
<div class="card-header block">
<h5 class="card-title mb-1.25">Street View Google Map</h5>
<p class="text-default-400">Displays a satellite-styled view of the map.</p>
</div>
<div class="card-body">
<iframe src="https://www.google.com/maps/embed/v1/place?q=Statue+of+Liberty&amp;key=AIzaSyBSFRN6WWGYwmFi498qXXsD2UwkbmD74v4&amp;zoom=18&amp;maptype=satellite" style="width: 100%; height: 360px; overflow: hidden; border: 0"></iframe>
</div>
</div>
<div class="card">
<div class="card-header block">
<h5 class="card-title mb-1.25">Dark Google Map</h5>
<p class="text-default-400">A dark-mode styled map using CSS filters.</p>
</div>
<div class="card-body">
<iframe src="https://www.google.com/maps/embed/v1/place?q=Sydney+Opera+House&amp;key=AIzaSyBSFRN6WWGYwmFi498qXXsD2UwkbmD74v4" style="width: 100%; height: 360px; overflow: hidden; border: 0; filter: invert(100%) hue-rotate(180deg)"></iframe>
</div>
</div>
</div>
</div>
<!-- end grid-->
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>
</body>
</html>