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'],
components: { customToolbar }
};
</script>
For anyone with this issue, check this issue. Basically, nothing changes on your side, just set the map element's height.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With