[Vue.js] google map api 사용하기

깨미·2022년 1월 11일

vue.js

목록 보기

1/4

Google Cloud Platform

https://console.cloud.google.com/home

무료 체험판 사용하기

Google 계정이 로그인된 상태라면 홈 상단에 이런 문구가 띄어진걸 확인할 수 있다.

여기서 오른쪽 활성화 버튼을 누르면 자기 개인 정보, 결제 정보 까지 3단계에 걸쳐 작성을 해야 체험판을 사용할 수 있다.

프로젝트 생성

프로젝트가 없으면 홈에서 이런 문구를 확인할 수 있다.
프로젝트 만들기를 눌러 프로젝트를 생성한다.

API 키 생성

왼쪽 메뉴에서 'API 및 서비스' > '사용자 인증 정보' 를 누른다.

그럼 여기 사용자 인증 정보 만들기를 눌러 'API 키'를 누르면 바로 생성된다.

현재 단계에서는 뭐 키 제한은 딱히 할 필요 없으니 넘어가겠다.

Maps JavaScript API

검색 창에 위와 같이 입력을 하면 API에 Maps JavaScript API가 있는 걸 볼 수 있다.

'사용' 버튼을 누른다.

이제 Google Map을 사용할 수 있는 준비는 모두 끝났다. 발급한 API Key를 이용하기만 하면 된다.

Vue.js

index.html

public > index.html > head

빨간색 칠한 곳에 자신의 api key를 붙여 넣는다.

Map.vue

이제 지도를 표시할 vue 파일을 하나 생성한다.

<template>
  <div style="width:300px; height:300px" id="map"></div> 
</template>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR API KEY"></script>
<script>
export default {
  mounted() {
    this.initMap();
    this.setMarker(this.mapCenter, "ce");
    this.setMarker(this.bands, "1");
    this.setMarker(this.bands2, "2");
  },
  methods: {
    initMap() {
      this.map = new google.maps.Map(document.getElementById("map"), { //getElementById로 map id 속성의 요소를 가져온다.
        center: this.mapCenter, //center로 할 위도, 경도를 지정한다.
        zoom: 17, //zoom size를 지정.
        maxZoom: 20,
        minZoom: 3,
        streetViewControl: true,
        mapTypeControl: true,
        fuulscreenControl: true,
        zoomControl: true,
      });
    },
    setMarker(Points, Label) {//지도에 마커를 찍는 함수.
      const markers = new google.maps.Marker({
        position: Points,
        map: this.map,
        label: {
          text: Label,
          color: "#FFF",
        },
      });
    },
  },
  data() {
    return {
      map: null,
      mapCenter: { lat: 35.105696, lng: 129.042857 },
      bands: {
        lat: 35.106187,
        lng: 129.042943,
      },
      bands2: {
        lat: 35.105556,
        lng: 129.04393,
      },
    };
  },
};
</script>