ZvGoogleMaps ​

<template>
  <ZvGoogleMapsLoader
    api-key="AIzaSyBBHeLQn1Eni7yp6314F6xQifJWX-WLerA"
    style="height: 400px"
    :bounds="bounds"
    :map-config="mapConfig"
    v-slot="{ selected: selectedMarker }"
  >
    <ZvGoogleMapsMarker
      v-for="({ position, title }, index) in stores"
      :lat="position.lat"
      :lng="position.lng"
      :index="index"
      :class="['w-7 cursor-pointer', selectedMarker === index ? 'z-20' : 'hover:z-10']"
    >
      <ZvIcon name="zv-marker" class="text-2xl" />
      <div
        v-if="selectedMarker === index"
        class="absolute overflow-hidden w-56 transform -translate-x-1/2 -translate-y-5 bg-white left-1/2 bottom-full"
      >
        <div class="flex flex-col space-y-1 px-4 py-2">
          <span class="text-xs font-bold font-sans">{{ title }}</span>
          <span>1 km</span>
        </div>
        <button type="button">
          <ZvIcon name="cross" size="small" class="absolute top-0 right-0 mt-3 mr-3 transform rotate-180" />
        </button>
        <div class="pl-2 flex items-center justify-between">
          <button type="button" class="flex items-center text-xs underline font-sans">
            Plus de détails
            <ZvIcon name="chevron-up" size="mini" class="ml-2 transform rotate-180" />
          </button>
          <button type="button" class="uppercase bg-black text-white text-xs py-2 px-4">Choisir</button>
        </div>
      </div>
    </ZvGoogleMapsMarker>
  </ZvGoogleMapsLoader>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  import ZvGoogleMapsLoader from '@zadigetvoltaire/ui/components/ZvGoogleMapsLoader'
  import ZvGoogleMapsMarker from '@zadigetvoltaire/ui/components/ZvGoogleMapsMarker'

  const stores = [
    { title: 'Boutique Zadig #1', position: { lat: 48.846234, lng: 2.397491 } },
    { title: 'Boutique Zadig #2', position: { lat: 48.856234, lng: 2.397491 } },
    { title: 'Boutique Zadig #3', position: { lat: 48.866234, lng: 2.397491 } },
    { title: 'Boutique Zadig #4', position: { lat: 48.876234, lng: 2.417491 } },
    { title: 'Boutique Zadig #5', position: { lat: 48.846234, lng: 2.377491 } },
    { title: 'Boutique Zadig #6', position: { lat: 48.856234, lng: 2.387491 } },
    { title: 'Boutique Zadig #7', position: { lat: 48.826234, lng: 2.397491 } },
    { title: 'Boutique Zadig #8', position: { lat: 48.856234, lng: 2.407491 } },
  ]

  const bounds = computed(() => stores.map((store) => ({ lat: store.position.lat, lng: store.position.lng })))

  const mapConfig = {
    zoom: 14,
    minZoom: 2,
    maxZoom: 16,
    center: stores[0].position,
    clickableIcons: false,
    styles: [
      {
        featureType: 'landscape',
        elementType: 'labels',
        stylers: [
          {
            visibility: 'off',
          },
        ],
      },
      {
        featureType: 'transit',
        elementType: 'labels',
        stylers: [
          {
            visibility: 'off',
          },
        ],
      },
      {
        featureType: 'poi',
        elementType: 'labels',
        stylers: [
          {
            visibility: 'off',
          },
        ],
      },
      {
        featureType: 'water',
        elementType: 'labels',
        stylers: [
          {
            visibility: 'off',
          },
        ],
      },
      {
        featureType: 'road',
        elementType: 'labels.icon',
        stylers: [
          {
            visibility: 'off',
          },
        ],
      },
      {
        stylers: [
          {
            hue: '#00aaff',
          },
          {
            saturation: -100,
          },
          {
            gamma: 2.15,
          },
          {
            lightness: 12,
          },
        ],
      },
      {
        featureType: 'road',
        elementType: 'labels.text.fill',
        stylers: [
          {
            visibility: 'on',
          },
          {
            lightness: 24,
          },
        ],
      },
      {
        featureType: 'road',
        elementType: 'geometry',
        stylers: [
          {
            lightness: 57,
          },
        ],
      },
    ],
  }
</script>