61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<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>
|