[JavaScript/Vue] 구글맵(Google Map) 마커 추가하기

* [구글맵 튜토리얼] 포스트와 연결되는 포스트입니다. [구글맵 튜토리얼]에 대해서 먼저 알고 싶으시면 아래의 링크를 먼저 참고하시길 바랍니다.*

https://onlab94.tistory.com/142

[JavaScript/Vue] 구글 맵(Google Map) 튜토리얼

 

---

 

<script> 부분

<script>에서 locationMarkers를 추가합니다. locationMarkers는 추후에 위치 정보뿐만 아니라 다른 정보도 넣기 위해서 아래와 같은 형식으로 작성했습니다. 다른 형식으로 작성하셔도 무관하지만 반드시 lat과 lng를 넣어주셔야 합니다.

locationMarkers: [
        { position: { lat: 위도1, lng: 경도1 } },
        { position: { lat: 위도2, lng: 경도2 } },
]

 

<script>
var seoul = { lat: 37.5642135, lng: 127.0016985 };
export default {
  name: "AddGoogleMap",
  data() {
    return {
      center: seoul,
      locationMarkers:[
          {
              position: seoul
          },
      ],
    };
  },
};
</script>

 

<template> 부분

<template>에서 <gmap-map ... ></gmap-map> 사이에 <gmap-marker></gmap-marker>를 추가해줍니다.

v-for를 이용하여 locationMarkers를 생성하고 :position에 위치 데이터(즉, lat과 lng를 포함한 데이터)를 설정합니다.

<template>
  <div>
    <gmap-map
        :zoom="14"    
        :center="center"
        style="width:100%;  height: 600px;"
      >
      <gmap-marker
        :key="index"
        v-for="(m, index) in locationMarkers"
        :position="m.position"></gmap-marker>
    </gmap-map>
  </div>
</template>

 

 

전체 코드

<template>
  <div>
    <gmap-map
        :zoom="14"    
        :center="center"
        style="width:100%;  height: 600px;"
      >
      <gmap-marker
        :key="index"
        v-for="(m, index) in locationMarkers"
        :position="m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>
 
<script>
var seoul = { lat: 37.5642135, lng: 127.0016985 };
export default {
  name: "AddGoogleMap",
  data() {
    return {
      center: seoul,
      locationMarkers:[
          {
              position: seoul
          }
      ]
    };
  },
};
</script>

 

실행 화면