vue.js nuxt.js google-map

vue-google-map

<template>
  <div class="Map-box">
    <client-only>
      <GmapMap 
        class="Map"
        :center="map.center"
        :zoom="map.zoom"
        :options="options"
        map-type-id="roadmap"
       >
        <GmapMarker id="marker"
          :position="marker.position"
          :title="marker.title"
          :clickable="true"
          :draggable="false"
          :icon="marker.icon"
         >
        </GmapMarker>
      </GmapMap>
    </client-only>
  </div>
</template>
<script>
export default {
  data() {
    return {
      map: {
        center: {
          lat: 33.589145,
          lng: 130.423419
        },
        zoom: 16,
      },
      marker: {
        position: {
          lat: 33.589145,
          lng: 130.423419
        },
      },
    }
  }
}
</script>
<style lang="scss"　scoped>
.Map-box {
  height: 200px;

  .Map {
    height: 200px;
    width: 100%;
  }
}
</style>