<script setup>

const props = defineProps({
  markers: {
    type: Array,
    required: true
  }
})

const {markers} = props

const zoom =ref(2)




</script>

<template>
  <div class="h-full w-full">
    <LMap
        style="height: 300px;"
        :center="markers[0]"
        :use-global-leaflet="false"
        :zoom="10"
        ref="map"
    >
      <LTileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
          layer-type="base"
          name="OpenStreetMap"
      />
      <LMarker
          v-for="marker in markers"
          :lat-lng="marker"
      />
    </LMap>
  </div>
</template>

<style scoped>

</style>