Module Not Found error in Vue.js single page component using google maps

Question

I'm attempting to pull in a Google Map from the Google Maps API into my Vue.js application. I have retrieved my generated API key and I am trying to display the map. When I run the app, Atom throws a Module not found error message and the browser displays: Can't resolve 'https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap' in 'C:\Atom Projects\Project\client\src\components' Any idea what I'm doing wrong?

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

Tim · Accepted Answer · 2018-03-15 04:13:33Z

1

You can't add external <script>s to single file components like that.

The usual approach to cases like yours is to use one of the many libs that integrate vue and google maps.

Some of these libs make available new custom elements for you to use:

xkjyeah/vue-google-maps, for instance, creates the <gmap-map>;
Akryum/vue-googlemaps create the <googlemaps-map>;
GuillaumeLeclerc/vue-google-maps creates the <map>.

All of them have simple details to setting the key and instantiating maps. Refer to their page for examples and usage.

Another one that takes a more low-level approach is Js-GoogleMapsLoader. I'm not saying this one is better than the others -- overall those that are specifics to vue probably will give you an easier integration in the long run --, but since it does not have an example with Vue, here's how you could use it:

run npm install --save google-maps

change MyComponent.vue to:

<template>
  <div>    
  <div id="map">
  </div>
  </div>
</template>

<script>
import GoogleMapsLoader from 'google-maps'

export default {

  mounted: function () {
    GoogleMapsLoader.KEY = 'qwertyuiopasdfghjklzxcvbnm';
    GoogleMapsLoader.load(function(google) {
      var options = {
        zoom: 8,
        center:{ lat: 39.9612, lng: -82.9988 }
      }

      var map = new google.maps.Map(document.getElementById('map'), options);
    });
  }
}
</script>

<style>
  #map{
    height: 400px;
    width: 100%;
  }
</style>

And none of the options above need the additional <script> tag.

edited Mar 15, 2018 at 4:13

Tim

9523 gold badges13 silver badges32 bronze badges

answered Mar 15, 2018 at 3:21

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Over a year ago

Cheers! The Js-GoogleMapsLoader option worked. I will read up on these.

Collectives™ on Stack Overflow

Module Not Found error in Vue.js single page component using google maps

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related