Integrating Google Maps in vue.js

Question

I\'ve been trying to initialize a Google map on my vue.js project while including the script :

Answer 1

Initial vue part after Using google map callback function.

function initMap(){	
	var app = new Vue({
		el:"#app",
		data:{
			name:"Niklesh Raut",
			map:"",
			mapOptions:{}
		},
		mounted(){
			this.initMap();
		},
		methods:{
			initMap: function(){
				this.mapOptions = {
					center: new google.maps.LatLng(21.139808079490507, 79.07690763473511),
					zoom: 10,
					mapTypeId: 'roadmap'
				}
				this.map = new google.maps.Map(document.getElementById("map"), this.mapOptions);
			}
		}
	});
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
#content {
    width: 100%;
    /*padding: 20px;*/
    min-height: 100vh;
    transition: all 0.3s;
}
.map{
    height: 100%;
    width:100%;
}

	
	


	

		Name : {{name}}
		

	

Jsfiddle Link