Fix width of map

resources/js/Pages/IkeaRoot.vue

@@ -4,8 +4,8 @@ import {
   ref,
   onMounted,
   onUnmounted,
-  nextTick,
   computed,
+  nextTick,
   watch,
 } from "vue";
 import Swal from "sweetalert2";
@@ -49,18 +49,21 @@ const geoip = ref({});
 const rates = ref([]);
 const options_items = ref([]);
 const itemCode = ref(null);
+const googlemapbox = ref(null);
+const googlemapchart = ref(null);
+
+const gChartWidth = computed(() => screenWidth.value > 420 ? 400 : (screenWidth.value - 12 - 5));
+const gChartHeight = computed(() => gChartWidth.value == 400 ? 250 : (screenWidth.value *65/100) - 20);
+console.log('GCH',screenWidth.value, screenHeight.value, gChartWidth.value,gChartHeight.value);
 
-const gChartWidth = screenWidth.value > 420 ? 400 : (screenWidth.value - 12 - 5);
-const gChartHeight = gChartWidth == 400 ? 250 : (screenWidth.value *65/100) - 20;
-console.log('GCH',screenWidth.value, screenHeight.value, gChartWidth,gChartHeight);
 const options = {
   region: 150,
   colorAxis: {colors: ['#0000ff']},
   backgroundColor: '#81d4fa',
   datalessRegionColor: '#f8bbd0',
   //defaultColor: '#f5f5f5',
-  width:  gChartWidth,
+  width:  gChartWidth.value,
-  height: gChartHeight,
+  height: gChartHeight.value,
 };
 
 const chart_settings = {
@@ -380,7 +383,9 @@ const clear_all = () => {
 onMounted(fetch);
 onMounted(fetch_rates);
 onMounted(fetch_ccodes);
-
+onMounted(() => {
+    console.log('HEIGHT MAP', googlemapbox.value);
+});
 const showRow = async (item) => {
   console.log("ITEM=", item);
 
@@ -396,6 +401,10 @@ const showRow = async (item) => {
     products.value = response.data.products;
     countryHash.value = response.data.countryHash;
     console.log("TEST=", response.data);
+    nextTick(() => {
+      options.width=googlemapbox.value.clientWidth;
+      googlemapchart.value += 1;
+    })
   } catch (e) {
     const response = await Swal.fire({
       title: __("are you want to try again") + "?",
@@ -456,15 +465,16 @@ const selectedRowClassNameFunction = (item) => {
 
         </div>
       <div class="flex flex-col start-0 row-start-1">
-        <div
+        <div ref="googlemapbox"
           class="justify-center rounded-md border-black border-8 max-h-[328px]"
         >
-          <GChart
+          <GChart :key="googlemapchart"
             :events="gchartEvents"
             :type="type"
             :data="chart_coutries"
             :options="options"
             :settings="chart_settings"
+            :resizeDebounce="500"
           />
         </div>