I'm using Google API to display a map on my application and I'm using multiple dynamic components which each of them loads one map. Is it possible to load this map only one time in the parent and display it in each child component ?
Here are my components structure (I've removed everything which was important for my problem) :
Parent
<template>
<div>
<div v-for="tab in getTabs" :key="tab.index">
<keep-alive>
<component v-if="selectedTab === tab.index" v-bind:is="selected"/>
</keep-alive>
</div>
</div>
</template>
<script>
import Tab from './Tab';
export default {
name: 'Dispatcher',
components: {
Tab
},
data() {
return {
selected: '',
selectedTab: '',
tabIds: []
}
}
}
</script>
Child
<template>
<div class="row">
<div class="col-md-12" style="height:80vh">
<div class="gmap"></div>
</div>
</div>
</template>
<script>
export default {
name: 'Tab'
}
</script>
index.blade.php
<script src="map.js" type="text/javascript"></script>
<div id="dispatcher-body">
{{ csrf_field() }}
<dispatcher></dispatcher>
</div>
The script map.js in my blade is doing everything to load Google Maps on a div which has gmap class, such as in my child component. The map is loading great but it creates a new map for each child component.
I tried using v-slot but it doesn't work with my map.js and my script says that it doesn't find any gmap class (because I have no child component when I refresh the page).
Thanks in advance,
