railsとgooglemapsAPIで実装した現在地を表示するMAPがsystem

前提・実現したいこと

こんにちはRails初学者のshumpeiです！
railsアプリでgooglemapsAPIを用いて現在地および登録した周辺施設が表示されるMAPを表示する機能を実装したのですが、rspecのsystem_specでテストを記述しようとしたら下記のようなエラーでMAPが表示されませんでした。

chromedriver周りでエラーが出ているようで、位置情報取得の許可が必要なのかと考えたのですが、方法がわからずどうやったらMAPが表示されてテストが実施できるかご教示のほどお願いいたします

※ブラウザ上ではMAPは表示されており、現在地と周辺施設にピンが立っております

発生している問題・エラーメッセージ

Spots
  表示とリンクのテスト
    地図が表示され施設のマーカーが立っていること (FAILED - 1)

Failures:

  1) Spots 表示とリンクのテスト 地図が表示され施設のマーカーが立っていること
     Failure/Error: expect(page).to have_css '.gm-style'

     Selenium::WebDriver::Error::UnexpectedAlertOpenError:
       unexpected alert open: {Alert text : 位置情報取得に失敗しました！位置情報へのアクセスが許可されているか確認してください}
         (Session info: headless chrome=92.0.4515.159)

     [Screenshot Image]: /Users/os/dev_app/bg/tmp/screenshots/failures_r_spec_example_groups_spots_nested_地図が表示され施設のマーカーが立っていること_660.png


     # 0   chromedriver                        0x000000010ea71829 chromedriver + 2730025
     # 1   chromedriver                        0x000000010f12ef43 chromedriver + 9797443
     # 2   chromedriver                        0x000000010e803958 chromedriver + 182616
     # 3   chromedriver                        0x000000010e867260 chromedriver + 590432
     # 4   chromedriver                        0x000000010e855193 chromedriver + 516499
     # 5   chromedriver                        0x000000010e82b8be chromedriver + 346302
     # 6   chromedriver                        0x000000010e82cb25 chromedriver + 351013
     # 7   chromedriver                        0x000000010ea38f8f chromedriver + 2498447
     # 8   chromedriver                        0x000000010ea4ba61 chromedriver + 2574945
     # 9   chromedriver                        0x000000010ea1e76b chromedriver + 2389867
     # 10  chromedriver                        0x000000010ea4ceda chromedriver + 2580186
     # 11  chromedriver                        0x000000010ea2effc chromedriver + 2457596
     # 12  chromedriver                        0x000000010ea66148 chromedriver + 2683208
     # 13  chromedriver                        0x000000010ea662d1 chromedriver + 2683601
     # 14  chromedriver                        0x000000010ea76848 chromedriver + 2750536
     # 15  libsystem_pthread.dylib             0x00007fff205a58fc _pthread_start + 224
     # 16  libsystem_pthread.dylib             0x00007fff205a1443 thread_start + 15
     # ./spec/system/spots_spec.rb:12:in `block (3 levels) in <main>'
     # -e:1:in `<main>'

Finished in 3.34 seconds (files took 0.16882 seconds to load)
1 example, 1 failure

Failed examples:

rspec ./spec/system/spots_spec.rb:11 # Spots 表示とリンクのテスト 地図が表示され施設のマーカーが立っていること

該当のソースコード

system/spots_spec.rb

rspec
1require 'rails_helper'
2
3RSpec.describe 'Spots', type: :system do
4  describe '表示とリンクのテスト', js: true do
5    let!(:store1) { create(:store) }
6
7    before do
8      visit spots_path
9    end
10
11    it '地図が表示され施設のマーカーが立っていること' do
12      expect(page).to have_css '.gm-style'
13      expect(page).to have_css '#gmimap0'
14    end
15  end
16end
17

capybara.rb

rspec
1RSpec.configure do |config|
2  config.before(:each, type: :system) do
3    driven_by :rack_test
4  end
5
6  config.before(:each, type: :system, js: true) do
7    driven_by :selenium, using: :headless_chrome, screen_size: [1400, 1400]
8  end
9end
10

spots/index.html.rb

ruby
1<div class="container">
2  <div class="row">
3    <div class="col-12 my-5 d-flex justify-content-center">
4      <h2><i class="fas fa-map-marked-alt"></i>現在地から探す</h2>
5    </div>
6    <div id="map" class="mt-5 mx-auto"></div>
7  </div>
8</div>
9
10<script>
11  let map, geocoder, icon, storeMarker = [], infoWindow = [];
12  const stores = gon.stores;
13  let currentInfoWindow = null;
14
15  function initMap(){
16    geocoder = new google.maps.Geocoder()
17    if(!navigator.geolocation) {
18      alert('Geolocation APIに対応していません');
19      return false;
20    }
21    // 現在地が取得できたら地図の中心にピンを立てて表示、取得に失敗したらアラートを表示
22    navigator.geolocation.getCurrentPosition(function(position) {
23      latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
24      map = new google.maps.Map(document.getElementById('map'), {
25        center: latLng,
26        zoom: 12,
27      });
28      image = {
29        url: "<%= asset_path('gmap_icon.png') %>",
30        scaledSize: new google.maps.Size(50, 50),
31      }
32      marker = new google.maps.Marker({
33        position:  latLng,
34        map: map,
35        icon: image,
36        animation: google.maps.Animation.DROP,
37        title:"現在地",
38      });
39
40      for (let i = 0; i < stores.length; i++){
41        storeMarker[i] = new google.maps.Marker({
42          map: map,
43          position: {
44            lat: stores[i].latitude,
45            lng: stores[i].longitude,
46          }
47        });
48        contentString =
49          `<p class="mb-0">施設名：<a href='/stores/${stores[i].id}'>${stores[i].name}</a></p>` +
50          '<hr class="my-0">' +
51          `<p class="mt-3 mb-0">施設紹介:${stores[i].introduction}</p>` +
52          `<p class="mt-1 mb-0">住所　　:${stores[i].prefecture_code}${stores[i].city}</p>`;
53
54        infoWindow[i] = new google.maps.InfoWindow({
55          content: contentString,
56        });
57        storeMarker[i].addListener("click", () => {
58          if (currentInfoWindow) {
59            currentInfoWindow.close();
60          }
61          infoWindow[i].open(map,storeMarker[i]);
62          currentInfoWindow = infoWindow[i];
63        });
64      }
65    }, function() {
66      alert('位置情報取得に失敗しました！位置情報へのアクセスが許可されているか確認してください');
67    });
68  }
69</script>
70
71<script async defer
72      src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= Rails.application.credentials.g_map[:api] %>&callback=initMap">
73</script>
74