Trying yaml approach

deploy.yml

@@ -0,0 +1,35 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main  # Set your default branch here
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout Repository
+      uses: actions/checkout@v2
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'  # Set your Node.js version here
+
+    - name: Install Dependencies
+      run: npm install
+
+    - name: Inject API Key
+      run: sed -i 's/YOUR_API_KEY_PLACEHOLDER/${{ secrets.GOOGLE_API_KEY }}/' path/to/your/file.js
+
+    - name: Build
+      run: npm run build  # Replace with your build command
+
+    - name: Deploy to GitHub Pages
+      uses: JamesIves/github-pages-deploy-action@4.1.4
+      with:
+        branch: gh-pages  # The branch the action should deploy to.
+        folder: build     # The folder the action should deploy.
+        token: ${{ secrets.GITHUB_TOKEN }}  # GitHub automatically creates this secret to use in your workflow.

index.html

@@ -13,13 +13,8 @@
       }
     </style>
   </head>
-  <script id="googleMapsScript" async defer></script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_PLACEHOLDER&callback=initMap" async defer></script>
   <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      var script = document.getElementById("googleMapsScript");
-      script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_API_KEY}&callback=initMap`;
-    });
-
     let map;
 
     function getMarkerIcon(boardType) {