<template>
    <div>
        <div class="mt-5 sm:px-3 lg:px-5">구글 맵</div>

        <div class="mt-5">
            <GMapMap
                :center="center"
                :zoom="15"
                :options="{
                    zoomControl: true,
                    mapTypeControl: false,
                    scaleControl: false,
                    streetViewControl: false,
                    rotateControl: false,
                    fullscreenControl: true,
                }"
                style="width: 100%; height: 500px; margin: auto"
            >
                <GMapMarker
                    v-for="(marker, index) in markers"
                    :key="index"
                    :position="marker.position"
                    :clickable="true"
                    :draggable="false"
                    @click="openMarker(marker.id)"
                >
                    <GMapInfoWindow
                        :closeclick="true"
                        :opened="openedMarkerID === marker.id"
                        @closeclick="openMarker(null)"
                    >
                        <div>{{ marker.description }}</div>
                    </GMapInfoWindow>
                </GMapMarker>
            </GMapMap>
        </div>
    </div>
</template>

<script setup lang="ts">
const openedMarkerID = ref(null);
const center = { lat: 37.5488, lng: 127.0440105738147 };
const markers = [
    {
        description: 'Inspond Co., Ltd.',
        title: '인스폰드',
        label: ['라벨'],
        id: '1',
        position: {
            lat: 37.5488,
            lng: 127.0440105738147,
        },
    },
];

function openMarker(id) {
    console.log('huk open, id = ', id);
    openedMarkerID.value = id;
}
</script>
