I'm facing an issue while trying to integrate a Google Map from the Google Maps API into my Vue.js application. I have obtained my API key and made an attempt to display the map. However, upon running the app, Atom throws a "Module not found" error message and the browser shows:
Can't resolve 'https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap' in 'C:\Atom Projects\Project\client\src\components'MyComponent.vue
<template>
<div>
<div id="map">
</div>
</div>
</template>
<script>
function initMap () {
var options = {
zoom: 8,
center:{lat:39.9612,lng:-82.9988}
}
var map = new google.maps.Map(document.getElementById('map'), options);
}
</script>
<script async defer type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>
<style>
#map{
height: 400px;
width: 100%;
}
</style>
Full Error from Browser
./src/components/MyComponent.vue
Module not found: Error: Can't resolve 'https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap' in 'C:\Atom Projects\MyProject\client\src\components'
@ ./src/components/MyComponent.vue 8:0-131 9:0-144
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js