◆ 地図タイル以外に 8 つ

Google Maps ではマーカーが配置される場所やポリラインが配置場所など複数のレイヤがあります
それらの div を取得したい場合は OverlayView のインスタンスで getPanes() を呼び出すと取得できます

const ov = new google.maps.OverlayView()
ov.setMap(map)
ov.getPanes()
floatPane: div
floatShadow: div
mapPane: div
markerLayer: div
overlayImage: div
overlayLayer: div
overlayMouseTarget: div
overlayShadow: div

OverlayView はマーカーみたいな用意されてるものじゃなくて自分でカスタムしたものを配置するために使います
これをどのレイヤに配置するかを選んで配置するために各レイヤを getPanes() で取得できます
リファレンスを探した感じでは他の方法では取得できなそうです
https://developers.google.com/maps/documentation/javascript/reference/

地図を初期化した後の HTML はこういう感じになっています
各レイヤの div がわかるようにコメントを追加しています

<div class="map" style="position: relative; overflow: hidden;">
<div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px;...">
<div class="gm-style" style="position: absolute; z-index: 0; ...">
<div tabindex="0" style="position: absolute; z-index: 0; ...">
<div style="z-index: 1; position: absolute;...">
<!-- mapPane (地図タイルではなく地図タイルの上) -->
<div style="position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;"></div>
<!-- overlayLayer (polyline とか) -->
<div style="position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>
<!-- overlayShadow -->
<div style="position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>
<!-- markerLayer -->
<div style="position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"></div>
<!-- 地図タイル -->
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;"></div>
</div>
<div class="gm-style-pbc" style="z-index: 2; position: absolute; height: 100%; width: 100%; ...">
<p class="gm-style-pbt"></p>
</div>
<div style="z-index: 3; position: absolute; height: 100%; width: 100%; ...">
<div style="z-index: 4; position: absolute; left: 50%; top: 50%;...">
<!-- overlayImage -->
<div style="position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div>
<!-- floatShadow -->
<div style="position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div>
<!-- overlayMouseTarget -->
<div style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div>
<!-- floatPane -->
<div style="position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>

z-index が 1 の div と 3 の div で分かれていて 3 のほうには中に 4 があってその内側にレイヤの div が並んでいます
100 ~ 107 ときれいに数字が並んでいますが 親の z-index が違うので z-index が 4 のほうを 104 からにする必要はなくて単純にわかりやすいように続きからにしてるのだと思います

レイヤの説明は Custom Overlay のドキュメントにあります
https://developers.google.com/maps/documentation/javascript/customoverlays#initialize
ただ 一部のレイヤのみなのでそれ以外を使うことは推奨されてないように思えます
レイヤを上から順に並べるとこうなってます
✓があるのがドキュメントに記述のあるレイヤです

floatPane            ✓
overlayMouseTarget ✓
floatShadow
overlayImage
markerLayer ✓
overlayShadow
overlayLayer ✓
mapPane ✓
mapTile

マーカーについて DOM Marker の場合は markerLayer と overlayMouseTarget の両方に div や img タグが配置されます
overlayMouseTarget の方は opacity が 0 で透明で見えないのでクリックなどマウスの判定だけに使ってるようです
分ける必要があるのかよくわかりませんが とりあえず上のレイヤに見えないマーカーがあるので CustomOverlay を overlayImage に配置したとすると 見た目上はマーカーより上のレイヤに Custom Overlay が来ますが マウスの当たり判定は overlayMouseTarget にあるマーカーの方が優先されるので クリックしても見た目上後ろ側にあるマーカーをクリックした扱いになります

ドキュメントでも markerLayer などでは DOM イベントは受け取らず overlayMouseTarget で DOM イベントを受け取れるとあるので クリックなどマウスイベントを扱うなら overlayMouseTarget に配置すべきです