Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError:

Question

I am tring to use the Google Map Javascript API into my VueJs project WITHOUT using this package https://www.npmjs.com/package/vue2-google-maps (because it's too limited as I see it).

So here what I have done, after having register my Vue component in app.js :

    require('./bootstrap');

    window.Vue = require('vue');

    const app = new Vue({
        el: '#app',
     });

    Vue.component(
       'map-component',
       require('./components/MapComponent.vue').default
     );

In MapComponent.vue

            <template>

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


            </template>

            <script>

              export default {

                data: function() {
                  return {
                  }
                },
                created() {
                  let googleApi = document.createElement('script');
                  googleApi.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyA.......S-3SvLw_-twW72Zg&callback='+this.initMap+'');
                  document.head.appendChild(googleApi);
                },
                mounted() {
                  initMap: function() {
                    var map;
                    map = new google.maps.Map(document.getElementById('map'), {
                      center: {lat: -34.397, lng: 150.644},
                      zoom: 8
                    });
                  }

                },

              }

            </script>

I also tried to switch created() with mounted() , but it shows the same error

The result without error should show a Google map on the page.

Thanks for your help

Aymeric

Answer 1

Try this in Created this.initMap() = function() { ... }

Your code will not work because you are trying to access a variable that is not initialized yet. In Vue First created method is executed then mounted method.

More info here: https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks