LoginSignup
0
2

More than 3 years have passed since last update.

VueでGoogleマップを使用しているコンポーネントを分離し、子コンポーネントでマップオブジェクトをpromiseで受け取る

Last updated at Posted at 2021-03-12

記事について

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;
        });
    }

参考

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2