---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import CaptureScript from '@shared/components/CaptureScript.astro'
---

<DefaultLayout title="Full Size Map" pageHeader={false} pageMenu="plugins.map-fullsize" pageLibs={['google-maps']} navbarPosition="vertical" wrapperFull>
  <h1 class="visually-hidden">Full Size Map</h1>
  <div class="map flex-fill" id="map-google"></div>
  <CaptureScript>
    <!-- BEGIN MAP SCRIPT -->
    <script is:inline>
      window.tabler_map ??= {}

      function initMap() {
        const map = new google.maps.Map(document.getElementById('map-google'), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        })

        window.tabler_map['map-google'] = map
      }

      document.readyState !== 'loading' ? initMap() : document.addEventListener('DOMContentLoaded', initMap, { once: true })
    </script>
    <!-- END MAP SCRIPT -->
  </CaptureScript>
</DefaultLayout>