Map not showing - vue-map element size issue ?

[petegore]

Hi,

My issue

I just reused the basic example given in the node page : https://www.npmjs.com/package/vue2-google-maps.

The problem : the console displays no error and using dev-tools, I can see the nested components... But the map is not showing.

I just noticed that there is a .vue-map-container that contains a .vue-map element. If I add to this one a given pixel height and width, and then resize the page zoom, so the map appears.

Any idea ?

My code

I created a custom component named base-map. I call it from a Symfony twig template :

{% block app %}
    <base-map style="width: 500px; height: 300px"></base-map>
{% endblock %}

The component is exactly the same as in the example, except I added the version 3. in order to try to fix the issue, and **I named the Vue instance "Vue2" to avoid conflict with the main app Vue.

<!-- BaseMap.vue -->
<template>
    <gmap-map
        :center="center"
        :zoom="7"
        style="width: 500px; height: 300px"
    >
        <gmap-marker
            :key="index"
            v-for="(m, index) in markers"
            :position="m.position"
            :clickable="true"
            :draggable="true"
            @click="center=m.position"
        ></gmap-marker>
    </gmap-map>
</template>

<script>
    import * as VueGoogleMaps from 'vue2-google-maps';
    import Vue2 from 'vue';

    Vue2.use(VueGoogleMaps, {
        load: {
            key: 'MY_KEY',
            v: '3.',
            // libraries: 'places', //// If you need to use place input
        }
    });

    export default {
        data () {
            return {
                center: {lat: 10.0, lng: 10.0},
                markers: [{
                    position: {lat: 10.0, lng: 10.0}
                }, {
                    position: {lat: 11.0, lng: 11.0}
                }]
            }
        }
    }
</script>

And I define my component totally normally there :

// app.js
import Vue from 'vue';
import BaseMapComponent from '../vue/components/BaseMap.vue';

// Vue components
Vue.component('base-map', BaseMapComponent);

new Vue({
    el: '#app',
});

[petegore]

Duplicate of 145

Solution : add custom CSS like this

.vue-map-container,
.vue-map-container .vue-map {
    width: 100%;
    height: 100%;
}