I have bulit an app based on Vue.js using Monaca,Cordova and onsenUI. I want to show my location using Google map in my page. To implement this I have used a npm package vue2-google-maps but it does not show anything.

The codes I have used are from the official documentation of the package. They are given below:

    <template>
      <v-ons-page>
        <custom-toolbar>Page 1</custom-toolbar>
        <div>
       <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>
      </div>
      </v-ons-page>
    </template>
    <script>
    import * as VueGoogleMaps from 'vue2-google-maps';
      import Vue from 'vue';

      Vue.use(VueGoogleMaps, {
        load: {
          key: 'AIzaSyDX3SEHwFUY-k_Jp7YMp0-uTvo7up-paXM',
          v: '3.26',
          // 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}
            }]
          }
        },


         props: ['pageStack'],
         ponents: { customToolbar }

     };
    </script>

I have bulit an app based on Vue.js using Monaca,Cordova and onsenUI. I want to show my location using Google map in my page. To implement this I have used a npm package vue2-google-maps but it does not show anything.

The codes I have used are from the official documentation of the package. They are given below:

    <template>
      <v-ons-page>
        <custom-toolbar>Page 1</custom-toolbar>
        <div>
       <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>
      </div>
      </v-ons-page>
    </template>
    <script>
    import * as VueGoogleMaps from 'vue2-google-maps';
      import Vue from 'vue';

      Vue.use(VueGoogleMaps, {
        load: {
          key: 'AIzaSyDX3SEHwFUY-k_Jp7YMp0-uTvo7up-paXM',
          v: '3.26',
          // 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}
            }]
          }
        },


         props: ['pageStack'],
         ponents: { customToolbar }

     };
    </script>

• javascript
• google-maps
• cordova
• vue.js
• monaca

• 2 missing ; in style="width: 500px; height: 300px;" ,,, missing : in v-for="(m, index) in markers" .. so check for you sintax – ScaisEdge Commented Sep 10, 2017 at 6:54
• It shows invalid expression if i add semicolon ' : ' @scaisEdge – Tasfia Sharmin Commented Sep 10, 2017 at 7:04

1 Answer 1

For anyone with this issue, check this issue. Basically, nothing changes on your side, just set the map element's height.