[Vuejs]-Google Map not loading properly with vue js

by

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>

Leave a comment