[vue] google map 적용하기 , vue2-google-map 사용

vue2-google-map을 사용할 때 map에서 제공하는 함수들을 사용하는 방법

this.$refs.gmap.$mapPromise.then((map) => {
  map.setZoom(18)
})

이 promise 에서 map에 담아주는 객체는 google.maps.Map 에서 제공하는 객체이므로 이 객체를 google map api 문서 (https://developers.google.com/maps/documentation/javascript/reference/map) 에 써져있는 그대로 사용할 수 있다.

 

 

* 기본세팅방법

 

import vue2-google-maps

import Vue from "vue";
import * as VueGoogleMaps from 'vue2-google-maps';
import vueI18n from "./i18n";


let apiKey = "google map api key"	//구글에서 발급받은 키 입력

Vue.use(VueGoogleMaps, {
    load: {
        key: apiKey,
        //language : "ko",	//option
        libraries: 'places', // This is required if you use the Autocomplete plugin
    },
})

export default apiKey;

 

vue2-google-map 의 main.js 소스를 보면 이렇게 컴포넌트가 등록이 되어있다.

 

 

따라서 기본적으로 import 만 해도 GmapMap 컴포넌트는 바로 사용가능하다.

<!-- 자동완성 검색 -->
<GmapAutocomplete
              :placeholder="$t('search_address')"
              class="input-text-area"
              @place_changed='addMarker'
          />

<gmap-map class="mt-1"
          ref="gmap"
    :options="{
       zoomControl: true,
       mapTypeControl: false,
       scaleControl: false,
       streetViewControl: false,  //거리를 사람입장에서 보기 옵션
       rotateControl: true,
       fullscreenControl: false,
       disableDefaultUi: false
     }"
    :center="center"
    :zoom="zoomLevel"
    style='width:100%;'
         :style="{height: mapHeight}"
    @click="getLocation($event.latLng)"
>

  <gmap-marker
      id="button-1"
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      @click="center=m.position"
  />

  <!-- 안내문구 -->
  <div slot="visible">
    <transition name="fade">
      <div v-if="isShowGuide" @click="isShowGuide=false">
        <!-- border-radius: 5px; -->
        <h5 class="bg-primary position-absolute text-light p-2 text-center"
            style="top:70%; left:50%; transform:translateX(-50%);width:80vw">
          지도에 위치를 표시해주세요.
        </h5>
      </div>
    </transition>
  </div>
</gmap-map>

 

여기서 map 위에 뭔가 안내문구 가 필요하다면  slot 을 사용하면 된다. visible slot 으로 등록되어있다.

 

----결과----