記事について
Vueでgoogleマップを使用していると、コンポーネントがどんどん大きくなってくるので分けてみた。
- 参考ページのQiita - Vue.jsでライブラリ使わずにgoogle mapを利用するを見ると、provide,injectを使用して綺麗にコンポーネントを分けているが、元々の実装都合でうまく導入できなかった。これから実装を開始する場合などは上記参考ページを確認して欲しい
- Vue.jsが公式で出しているコードを利用するも、コールバックでの実装で使い勝手がイマイチだった。
なので、ここではpromiseを利用してマップオブジェクトを受け取る実装を説明する
親コンポーネント
parent.js
Vue.component ('google-map-parent', {
data: function() {
return {
map: null
};
},
mounted: function() {
this.map = new google.maps.Map(this.$el, {
center: { lat: 0, lng: 0 },
zoom: 1
});
},
methods: {
getMap: function() {
var vm = this;
return new Promise(function(resolve, reject) {
function checkForMap() {
if (vm.map) {
resolve(vm.map);
} else {
setTimeout(checkForMap, 50);
}
}
checkForMap();
});
},
}
provide : function (){
return {
getMap: this.getMap
}
},
子コンポーネント
child.js
Vue.component('google-map-child', {
data: function() {
return {
map: null
};
},
inject: ["getMap"],
created: function() {
this.getMap().then((res_map) =>{
this.map = res_map;
});
}