<template>
  <!-- <img :src="staticUrl" alt="Loading map…" /> -->
  <div ref="mapEl" class="w-full h-96"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';

const mapEl = ref<HTMLDivElement | null>(null);
const mapLoaded = ref(false);
const staticUrl = `
    https://naveropenapi.apigw.ntruss.com/map-static/v2/raster-cors
    ?w=600&h=400
    &markers=type:d%7Csize:mid%7Ccolor:blue%7Cpos:37.5008668%126.8880337
    &X-NCP-APIGW-API-KEY-ID=ocltl9lci4
`.replace(/\s+/g, '');
onMounted(() => {
  if (!window.naver?.maps) return;
  if (!mapEl.value) return;

  const map = new window.naver.maps.Map(mapEl.value, {
    center: new window.naver.maps.LatLng(37.5008668, 126.8880337),
    zoom: 13,
  });
  new window.naver.maps.Marker({ position: map.getCenter(), map });
});
</script>
