GoogleMapAPIが表示されない

前提・実現したいこと

デプロイ上でGoogleMapAPIを表示したい。
ここに質問の内容を詳しく書いてください。
Laravel+vueにAPIとしてGoogleMapAPI,GooglePlaceAPIを用いて近くの飲食店を探すwebアプリを作っています。
APIをローカルで使う場合、CORSエラーが出るためcheromeのプロパティに下記のコマンドを使いAPIを使用していました。
機能が完成したため、AWSのEC2でインスタンスを使いnginxでデプロイをして使用したのですがエラーがでてAPIを表示できない。

ローカル上のAPI使用
--disable-web-security --user-data-dir="C://Chrome dev session"

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

APIを使用すると下記のエラーが表示されます。networkを確認してみるとurlが返ってきていて表示してみると値は取得できていました。

エラーメッセージ
app.js?id=62ba0bb588e32a54ee80:645 Uncaught (in promise) Error: Network Error
    at createError (app.js?id=62ba0bb588e32a54ee80:645)
    at XMLHttpRequest.handleError (app.js?id=62ba0bb588e32a54ee80:188)

該当のソースコード

投稿するため省略したため間違いがる可能性があります。

vue.js
1<template>
2    <div class="container">
3        mainmap4
4        <div class="row">
5            <div class="map col-md-5" ref="googleMap" style="float: left" />
6            <div class="col-md-3">
7                <input type="text" v-model="geo" style="width: 200px" />
8                <button v-on:click="geocoder">
9                    <i class="fas fa-search"></i>
10                </button>
11                </div>
12
13                <div class="form-check">
14                    <input
15                        type="radio"
16                        id="one"
17                        value="place1"
18                        v-model="place"
19                    />
20                    <label for="one">place1</label>
21                </div>
22                <div class="form-check">
23                    <input type="radio" id="two" value="place2" v-model="place" />
24                    <label for="two">place2</label>
25                </div>
26                <div>
27                    <div class="form-check">
28                        <input
29                            type="checkbox"
30                            id="checkBox1"
31                            value="和食"
32                            v-model="genres"
33                        />和食
34                    </div>
35                </div>
36                <button id="search" v-on:click="search">
37                    <i class="fas fa-search"></i>
38                </button>
39                <br />
40         
41                <div class="">
42                    <select id="log" v-model="genreText" style="width: 200px">
43                    </select>
44                </div>
45            </div>
46        </div>
47    </div>
48</template>
49<script>
50import GoogleMapsApiLoader from "google-maps-api-loader";
51export default {
52    // name: 'Map',
53    data() {
54        return {
55            reviews: [],
56            myAPI: "apikey",
57            map: null,
58            radius: 0,
59            geo: "",
60            circleMode: false,
61            sliderNum: 3,
62            genres: [],
63            logs: [],
64            genreText: null,
65            searchRange: 200,
66            optionCount: 0,
67            place: "place1",
68            dataCount: 0,
69            latarray: [],
70            lngarray: [],
71            restname: [],
72            openshop: [],
73            BOOL: [],
74            eigyou: [],
75            lat: ido,
76            lng: keido,
77            type: "",
78            keyword: "",
79            selected: null,
80            google: null,
81
82            mapConfig: {
83                // 地図の中心地点
84                center: {
85                    lat: ido,
86                    lng: keido,
87                },
88               
89                marker: null,            }
90        };
91    },
92    async mounted() {
93        this.google = await GoogleMapsApiLoader({
94            apiKey: this.myAPI
95        });
96        // this.initializeMap();
97        this.radius = this.sliderNum * this.searchRange;
98
99        document.getElementById("log").disabled = true;
100        document.getElementById("search").disabled = true;
101
102        this.initializeMap();
103        this.getItems();
104    },
105    methods: {
106        async main() {
107            this.dataCount = 0;
108            this.latarray = [];
109            this.lngarray = [];
110            this.restname = [];
111
112            if (this.genres.length > 0) {
113                for (let i = 0; i < this.genres.length; i++) {
114                    this.keyword = this.genres[i];
115                    await this.getLatLng();
116                }
117            } else {
118                await this.getLatLng();
119            }
120
121            this.map = new this.google.maps.Map(
122                this.$refs.googleMap,
123                this.mapConfig
124            );
125
126            await this.initializeMap();
127            await this.createMarker();
128        },
129        async getLatLng() {
130            await axios
131                .get(
132                    `https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=${this.myAPI}&location=${this.lat},${this.lng}&radius=${this.radius}&type=${this.type}&keyword=${this.keyword}&language=ja`
133                )
134                .then(result => {
135                    this.dataCount = Object.keys(result.data.results).length;
136
137                    for (let i = 0; i < this.dataCount; i++) {
138                        this.latarray.push(
139                            result.data.results[i].geometry.location.lat
140                        );
141                        this.lngarray.push(
142                            result.data.results[i].geometry.location.lng
143                        );
144                        this.restname.push(result.data.results[i].name);
145
146                })
147                .catch(error=> {
148                    console.log(error)
149                })
150        },
151        async initializeMap() {
152            this.mapConfig.center.lat = this.lat;
153            this.mapConfig.center.lng = this.lng;
154            this.map = new this.google.maps.Map(
155                this.$refs.googleMap,
156                this.mapConfig
157            );
158
159        async createMarker() {
160            // ジャンル検索の時のマーカー
161            if (this.genres.length > 0) {
162                for (var i = 0; i < this.dataCount; i++) {
163                    var markers = new google.maps.Marker({
164                        map: this.map,
165                        position: new this.google.maps.LatLng(
166                            this.latarray[i],
167                            this.lngarray[i]
168                        ),            }
169            // フリー検索の時のマーカー
170            else {
171                for (var i = 0; i < this.dataCount; i++) {
172                    var markers = new google.maps.Marker({
173                        map: this.map,
174                        position: new this.google.maps.LatLng(
175                            this.latarray[i],
176                            this.lngarray[i]
177                        ),
178            }
179        },
180        pageChange: function(page, start, end) {
181            // console.log(page, start, end);
182            if (end == 1) return;
183            this.currentPage = page;
184            this.offset = start;
185            this.getItems();
186        },
187
188        search() {
189            // チェックボックスのチェックを外す
190            document.getElementById("checkBox1").checked = false;
191            document.getElementById("checkBox2").checked = false;
192            document.getElementById("checkBox3").checked = false;
193            document.getElementById("checkBox4").checked = false;
194            document.getElementById("checkBox5").checked = false;
195            document.getElementById("checkBox6").checked = false;
196            document.getElementById("checkBox7").checked = false;
197            this.genres = [];
198
199            this.keyword = this.genreText;
200            // this.genreTextをfilterの中で使えない為
201            const a = this.genreText;
202            this.main();
203            const select = document.getElementById("log");
204
205            // logsに検索欄と同じものが無いか
206            const result = this.logs.filter(function(value) {
207                return value === a;
208            });
209
210
211            // テキストボックスを空に
212            this.genreText = "";
213        },
214        //住所から座標変換
215        async geocoder() {
216            //GeocodingAPIから緯度経度取得
217            var latlng = await axios.get(
218                `https://maps.googleapis.com/maps/api/geocode/json?address=${this.geo}&key=${this.myAPI}`,
219            );
220            this.lat = latlng.data.results[0].geometry.location.lat;
221            this.lng = latlng.data.results[0].geometry.location.lng;
222
223            this.initializeMap();
224        },
225        attachMessage(marker, msg, restname) {
226            google.maps.event.addListener(marker, "click", function(event) {
227                new google.maps.InfoWindow({
228                    content:
229                        msg +
230                        `<br><button onclick='location.href="/create/${restname}"' value=''>Google</button>`
231                }).open(marker.getMap(), marker);
232            });
233        },
234        
235    },
236    watch: {
237        place: async function() {
238            if (this.place == "place1") {
239                this.lat = ido;
240                this.lng = keido;
241            } else {
242                this.lat = ido;
243                this.lng = keido;
244            }
245
246            await this.main();
247        },
248        genres: async function() {
249            this.main();
250        },
251        genreText: async function() {
252            document.getElementById("search").disabled = false;
253        },
254    },
255};
256</script>

試したこと

nginx上でCORSを許可するコードを追加したのちに下記コードを打ち、レスポンスを確認した所、CORSは許可されている様です。

curl -I https://[site-url]
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Method: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Accept