Google Maps PlatformのMaps JavaScript APIを使った地図表示のあれこれ
みうP『Maps JavaScript API の読み込みの制御を強化する』
もう一つの問題は、Maps JavaScript API <script> ローダを使用するには、グローバルに定義された関数に対するコールバック パラメータを定義しなければならないことです。現在、開発者の皆様には、API の読み込みを待たずにすぐに google.maps.importLibrary() を使用できる 新しいインライン ブートストラップ ローダの使用をおすすめしています。これにより、面倒なグローバル コールバックを回避し、Promises または async/await を使用して、Maps JavaScript API の準備が完了するタイミングを追跡することもできます。
みうPページネーション（kaminariで実装）を使って行ったり来たり、もしくはブラウザバックしたりすると
initMap();がうまく呼び出されないことがあり、地図が表示されなかった。
Dynamic Library Import API を使うようにしたら解決したので、
グローバルコールバックがうまくいってなかったのかな？と。
（Dynamic Library Import APIを使用することでGoogle Maps JavaScript APIを動的に読み込むことができる）
はっきりとした原因はわからず。。
みうP現時点でgoogle.maps.Markerは非推奨となっている。
google.maps.marker.AdvancedMarkerElementを使うことが推奨されている。
google.maps.Marker（v3.56）は、2024 年 2 月 21 日にサポートが終了します。つきましては、新しい google.maps.marker.AdvancedMarkerElement クラスに移行することをおすすめします。
使用するにはmapIdが必要となるので注意。
ローカルで動作確認する程度なら"DEMO_MAP_ID"でも動いた。
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
});
みうP'v'パラメータ（バージョニング）の意味
Maps JavaScript APIは定期的にAPIの更新、新機能の追加、バグ修正、パフォーマンス改善がされているので、それをどの周期で更新するかという指定。
週ごとのチャンネルをおすすめしている模様。
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "YOUR_API_KEY_HERE",
v: "beta",
// Add other bootstrap parameters as needed, using camel case.
});
</script>
ほとんどのアプリケーションでは、週ごとのチャンネルをおすすめします。最も更新頻度が多く、最も新しいバージョンが適用されるため、最新のバグ修正やパフォーマンスの改善が施されます。次のスクリプトタグで Maps JavaScript API を読み込むと、週ごとのチャンネルを指定できます。