nuxt/gmap에서 height 100% 적용하는 방법(google map 100 height)

nuxt/gmaps 모듈은 nuxt(vue ssr) 프로젝트에서 간단하게 구글맵을 사용할 수 있게 해주는 라이브러리입니다. nuxt/gmaps에서 부모 요소의 높이값에 따라서 구글맵의 높이값을 가변으로 적용하는 방법을 소개합니다.

Gmap 컴포넌트에는 구글맵이 렌더링됩니다.

<template>
  <div class="gmap-holder">
    <GMap ref="gMap" :zoom="zoom" :center="center">
    </GMap>
  </div>
</template>

<script>
export default {
  name: 'Map',
  data() {
    return {
      center: { lat: 37.3203786, lng: 127.959774 },
      zoom: 15
    }
  }
}
</script>

Gmap 컴포넌트는 기본적으로 구글맵의 높이값을 400px로 고정적으로 렌더링합니다. 이 값을 부모요소의 높이에 따라서 가변으로 변경하는 방법이 존재합니다.

storybook에 nuxt/gmap 모듈을 활용해서 구글맵을 렌더링한 예시

부모 요소에 position속성을 relative로 세팅한 후 내부 Gmap__Wrapper 클래스 요소에 position속성을 absolute로 적용합니다.

<style lang="scss">
.gmap-holder {
  position: relative;
  .GMap__Wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100% !important;
    min-height: 400px;
  }
}
</style>

<style lang="scss">
.gmap-holder {
  position: relative;
  height: 100vh; // 높이값 100vh 추가
  .GMap__Wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100% !important;
    min-height: 400px;
  }
}
</style>

.gmap-holder 높이값에 따라서 구글맵 영역이 확장되는 예시입니다.

부모요소에 각각 height 650px, height 100vh 높이값을 설정한 모습

기본적인 google maps 라이브로리를 활용하면 DOM 요소가 다를 수 있으니 감안하시고 코드를 봐주시면 될 것 같습니다.