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: stackoverflow.com/questions/44634193/… — CyberAP
– CyberAP, Commented Jan 13, 2018 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
– CyberAP, Commented Jan 13, 2018 at 11:18

CyberAP · Accepted Answer · 2018-01-13 11:27:01Z

0

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>

answered Jan 13, 2018 at 11:27

CyberAP

1,2231 gold badge12 silver badges17 bronze badges

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

1 Comment

Alien Technology Over a year ago

The problem with loading the maps API from index.html is having different keys for development and production as recommended by Google.

Collectives™ on Stack Overflow

Google Map not loading properly with vue js

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