Google Maps APIを使って地図を表示させたい

前提・実現したいこと

Rails6でGoogleMaps検索後PlaceID(GoogleMaps内の固有の店舗情報)を保存、詳細ページにてplaceIDを使って地図を表示させるシステムを作っています。
具体的には、"Place ID Geocoder"を利用して、PlaceIDを取得、その後"Place Details"を利用してお店の情報を表示させようとしております。

保存、表示画面2つのJavaScript(GoogleMapsAPI)の内、表示させる機能を実装中に以下のエラーメッセージがコンソール内に発生し、マップが表示されません。
ちなみに、Geocoderの方もリロードしないと地図は表示されず挙動は安定しておりませんが表示はされます。

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

Uncaught (in promise) 
oe
message: "initMap is not a function"
name: "InvalidValueError"

Uncaught
oe
message: "Map: Expected mapDiv of type Element but was passed null."
name: "InvalidValueError"

該当のソースコード

js
1// This example requires the Places library. Include the libraries=places
2// parameter when you first load the API. For example:
3// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
4window.onload = function (){
5    initMap();
6}
7function initMap() {
8    const map = new google.maps.Map(document.getElementById("gmap"), {
9      center: { lat: 34.985849, lng: 135.7587667 },
10      zoom: 15,
11      mapTypeId: 'roadmap'
12    });
13    const request = {
14      placeId: gon.shop.location,  #DBに保存したPlaceIDを表示させたい
15      fields: ["name", "formatted_address", "place_id", "geometry"],
16    };
17    const infowindow = new google.maps.InfoWindow();
18    const service = new google.maps.places.PlacesService(map);
19    service.getDetails(request, (place, status) => {
20      if (status === google.maps.places.PlacesServiceStatus.OK) {
21        const marker = new google.maps.Marker({
22          map,
23          position: place.geometry.location,
24        });
25        google.maps.event.addListener(marker, "click", function () {
26          infowindow.setContent(
27            "<div><strong>" +
28              place.name +
29              "</strong><br>" +
30              "Place ID: " +
31              place.place_id +
32              "<br>" +
33              place.formatted_address +
34              "</div>"
35          );
36          infowindow.open(map, this);
37        });
38      }
39    });
40}

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7    <%= include_gon %>
8    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
11    <script
12      src="https://maps.googleapis.com/maps/api/js?key=[取得したAPIkey]&language=ja&callback=initMap&libraries=places&v=weekly"
13      defer
14    ></script>
15  </head>
16
17(中略)
18    <div id="gmap"></div>

試したこと

Geocoderを利用した際も、地図が表示されなかったため、
同様の解決手段としてPlace Detailsにも下記を追記しました。

js
1window.onload = function (){
2    initMap();
3}

補足情報

JavaScriptの記述は下記を参照しております。

Place ID Geocoder: https://developers.google.com/maps/documentation/javascript/examples/places-placeid-geocoder
Place Details: https://developers.google.com/maps/documentation/javascript/examples/place-details

Geocoderを記述したjsは下記になります。
＊id名に関して、geocoderは"map",PlaceDetailsは"gmap"として区別しております。

js
1window.onload = function (){
2  initMap();
3}
4function initMap() {
5  const map = new google.maps.Map(document.getElementById("map"), {
6    center: { lat: 34.985849, lng: 135.7587667 },
7    zoom: 10,
8    mapTypeId: 'roadmap'
9  });
10  const input = document.getElementById("pac-input");
11  const autocomplete = new google.maps.places.Autocomplete(input);
12  autocomplete.bindTo("bounds", map);
13  // Specify just the place data fields that you need.
14  autocomplete.setFields(["place_id", "geometry", "name", "formatted_address"]);
15  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
16  const infowindow = new google.maps.InfoWindow();
17  const infowindowContent = document.getElementById("infowindow-content");
18  infowindow.setContent(infowindowContent);
19  const geocoder = new google.maps.Geocoder();
20  const marker = new google.maps.Marker({ map: map });
21  marker.addListener("click", () => {
22    infowindow.open(map, marker);
23  });
24  autocomplete.addListener("place_changed", () => {
25    infowindow.close();
26    const place = autocomplete.getPlace();
27
28    if (!place.place_id) {
29      return;
30    }
31    geocoder.geocode({ placeId: place.place_id }, (results, status) => {
32      if (status !== "OK") {
33        window.alert("Geocoder failed due to: " + status);
34        return;
35      }
36      map.setZoom(11);
37      map.setCenter(results[0].geometry.location);
38      // Set the position of the marker using the place ID and location.
39
40      marker.setPlace({
41        placeId: place.place_id,
42        location: results[0].geometry.location,
43      });
44      marker.setVisible(true);
45      infowindowContent.children["place-name"].textContent = place.name;
46      infowindowContent.children["place-id"].textContent = place.place_id;
47      infowindowContent.children["place-address"].textContent =
48        results[0].formatted_address;
49      infowindow.open(map, marker);
50    });
51  });
52}