[Public Website] [Projects list] Move google maps api key to config (#…

…260)

* refactor: move google maps api key to config

* wip

.env.example

@@ -2,7 +2,9 @@ APP_NAME=Bursa binelui
 APP_ENV=local
 APP_KEY=
 APP_DEBUG=true
-APP_URL=bursabinelui.test
+APP_URL=https://bursabinelui.test
+
+GOOGLE_MAPS_API_KEY=
 
 LOG_CHANNEL=stack
 LOG_DEPRECATIONS_CHANNEL=null

app/Http/Middleware/HandleInertiaRequests.php

@@ -46,6 +46,7 @@ public function share(Request $request): array
                     'location' => $request->url(),
                 ]);
             },
+            'google_maps_api_key' => config('services.google_maps_api_key'),
         ]);
     }
 }

config/services.php

@@ -32,11 +32,14 @@
         'secret' => env('AWS_SECRET_ACCESS_KEY'),
         'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
     ],
+
     'eu_platesc' => [
         'test_mode' => env('EU_PLATESC_TEST_MODE', true),
         'url' => env('EU_PLATESC_URL', 'https://secure.euplatesc.ro/tdsprocess/tranzactd.php'),
         'merchant_id' => env('EU_PLATESC_MERCHANT_ID', ''),
         'private_key' => env('EU_PLATESC_PRIVATE_KEY', ''),
     ],
 
+    'google_maps_api_key' => env('GOOGLE_MAPS_API_KEY'),
+
 ];

resources/js/Components/maps/Map.vue

@@ -1,14 +1,11 @@
 <template>
-    <div>
-        <div id="map" class="rounded-lg" style="height: 550px"></div>
-    </div>
+    <div id="map" class="rounded-lg h-[550px]"></div>
 </template>
 
 <script setup>
 /** Import from vue. */
 import { ref, onMounted } from 'vue';
-
-const googleKey = import.meta.env.VITE_GOOGLE_KEY;
+import { usePage } from '@inertiajs/vue3';
 
 /** Component props. */
 const props = defineProps({ data: Array });
@@ -23,7 +20,7 @@ const selectedCounties = ref([]);
 async function initializeMap() {
     return new Promise((resolve, reject) => {
         const script = document.createElement('script');
-        script.src = `https://maps.googleapis.com/maps/api/js?key=${googleKey}`;
+        script.src = 'https://maps.googleapis.com/maps/api/js?key=' + usePage().props.google_maps_api_key;
         script.async = true;
         script.defer = true;
         script.onload = () => {