Инициализация Карт Google внутри компонента, но внутри определенного элемента

Question

Я использовал это руководство для использования API карт Google https://markus.oberlehner.net/blog/using-the-google-maps-api-with-vue/, и оно работает хорошо.Но он использует this.$el для загрузки экземпляра карты Google внутри компонента, и это заставляет брать весь экран, вместо этого я хочу загрузить его внутри .map, чтобы у меня была карта меньшего размера.

<template>
  <div class="container-fluid">

    init map 


    <div class="map">
    </div>

  </div>
</template>
<script>
import ProgressSpinner from '.././Preloader';
import { mapGetters } from 'vuex'
import gmapsInit from '../.././utils/gmaps';

export default {
  name: 'Tracking',
  data: () => ({

  }),
   async mounted() {
    $('.container-fluid').bootstrapMaterialDesign();
    try {
      const google = await gmapsInit();
      const geocoder = new google.maps.Geocoder();
      const map = new google.maps.Map(this.$el);
      geocoder.geocode({ address: 'Austria' }, (results, status) => {
        if (status !== 'OK' || !results[0]) {
          throw new Error(status);
        }
        map.setCenter(results[0].geometry.location);
        map.fitBounds(results[0].geometry.viewport);
      });
    } catch (error) {
      console.error('Error with calling Google maps API: ',error);
    }
  },
  computed: {
    ...mapGetters([])
  },
  created(){
    this.$store.dispatch ('allPoints')
    .then(()=> console.log('points'))
    .catch( () => console.log('no poiints ') )
  },
  methods: {

  },
  components: {
    ProgressSpinner
    }
}
</script>

<style scoped>
.map {
  width: 150px;
}
</style>

Answer 1

Проблема со стилем, поэтому я должен был добавить высоту к элементу .map.