first

safekiso_admin/base/pages/maps/index.vue

@@ -0,0 +1,60 @@
+<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>