Google Map not loading properly with vue js

Question

Google map not loading property unless I press ctrl+f5. I initialise map inside vue js mounted hook. The error displayed is

Error in mounted hook: "ReferenceError: google is not defined"

when I press ctrl+f5 everything works fine

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

<script src="https://maps.googleapis.com/maps/api/js?key=****"
            async defer></script>
new Vue({
    el:'#app',
    mounted() {
         map = new google.maps.Map(document.getElementById('map'), {
             center: {lat: -34.397, lng: 150.644},
             zoom: 8
         });
    }
});

This has been already answered: https://stackoverflow.com/questions/44634193/integrating-google-maps-in-vue-js — CyberAP, Jan 13 '18 at 11:18
TL;DR: you're using async loading, that's why GMaps is not available at the mounted hook yet. It's still loading. — CyberAP, Jan 13 '18 at 11:18
Yes because it's cached now and available at the runtime. It does not at the first time, though, that's why I suggest using a synchronous approach here. — CyberAP, Jan 13 '18 at 11:28
The order of loading your scripts matter. I suppose you're loading Google Maps api after your app's js. See answer below. — CyberAP, Jan 13 '18 at 11:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163103/discussion-between-rahul-reghunath-and-cyberap). — Rahul Reghunath, Jan 13 '18 at 11:45

score 0 · Accepted Answer · answered Jan 13 '18 at 11:27

I'd suggest using existing Google Maps libraries for Vue, but if you insist on loading Google Maps asynchronously as is:

new Vue({
    el:'#app',
    created() {
         let script = document.createElement('script');
         script.src = 'https://maps.googleapis.com/maps/api/js?key=****';
         document.body.appendChild(script);
         script.load = function(){  
             map = new google.maps.Map(document.getElementById('map'), {
                 center: {lat: -34.397, lng: 150.644},
                 zoom: 8
             });
         };
    }
});

Basically you have to listen for a load event to start working with API.

But I feel like in your case the best practice would be to load it synchronously before your Vue.js app even loads since it's probably fully reliant on Google Maps API:

<html>
<body>
...
    <script src="https://maps.googleapis.com/maps/api/js?key=****"></script>
    <script src="path-to-your-app's-js"></script>
</body>
</html>

The problem with loading the maps API from index.html is having different keys for development and production as recommended by Google. — Alien Technology, Mar 20 '19 at 21:22

Google Map not loading properly with vue js

1 Answers1