ruby on rails - Getting Google Maps to work with Vue.js -

i'm trying google maps working vue.js.

this html using. assume v-if="activestep === 1" works , displaying intended div:

<div id="map-container" v-if="activestep === 1">   <div id='location-map'></div> </div> ... <script src="https://maps.googleapis.com/maps/api/js?key=mykey"></script> 

id styling:

#location-map { height: 250px; } #map-container { padding: 15px 0; } 

and vue binding:

if(document.getelementbyid("map-container")) {   const mapvue = new vue({     el: '#map-container',     data: {       activestep: 1,       defaultlatlng: {lat: 37.5665, lng: 126.9780}     },     mounted: function() {       var map = new google.maps.map(document.getelementbyid('location-map'), {         zoom: 15,         center: this.defaultlatlng,         scrollwheel: false,         disabledoubleclickzoom: true,         pancontrol: false,         streetviewcontrol: false,         draggable: false       });       var marker = new google.maps.marker({         position: this.defaultlatlng,         map: map       });     }   }) } 

but map not displaying. doing incorrectly here?

there 2 issues can think of:

1. the google maps documentation calls script &callback=initmap , names function initmap whereas haven't done that. instead, having function call occur vue's mounted directive. not sure how i'd call initmap vue method. also, not using async defer (like <script async defer src="https://maps.googleapis.com/maps/api/js?key=mykey"></script>) on script read somewhere not necessary.

2. the v-if removes element , displays depending on activestep, perhaps map function isn't re-initialized when part of dom generated?

any appreciated. in advance!

if not using async defer callback, order of javascript important.

and matter if use async/defer other scripts. suggest using async defer callback ensure google maps has loaded , don't have worry order.

if want hook callback vue can this:

make callback point global vue instance:

&callback=app.createmap 

create global vue instance so:

window.app = new vue({}); 

now can have createmap method on main vue instance can initialize map.

of course if not showing map container straight away , display later on have call resize event on map ensure re-renders.