◆ API キーなしは暗くなるけど他の地図タイルを使えば普通に見れる
◆ leaflet とかの地図ライブラリより Google Maps の API が好きなら使えるかも

今の Google Maps は API キーがないと地図の表示が暗くなります
ダークモードと考えればこれでもいいのですが 明るい地図を見たいこともあります
API キーを取得すればいいのですが 登録だけではダメで請求情報(クレカ番号)まで必須です
V プリカとか無料で作れるクレカ番号を登録しておくのもアリですが そういう手続きすら面倒です

そうなると方法は別の地図ツールを使うことになります
個人的には leaflet に移りつつありますが GoogleMaps の API のほうが使いやすいと思うことが多いです
機能も多いし軽いですし

よくよく考えてみると Google Maps の API キー無しは地図が暗くなって警告が出るだけです
マーカーを設定したり線を引いたりなど Google Maps の API は普通に使えます
禁止されてそうな気もしましたが 特に使えなくされてるわけでもないので 地図が明るくなればこのままでも十分です

他の地図にしてみたら普通に見えそうな気がしたので 地図タイルを別のものに置き換えてみると……普通に表示できました
地図タイル上に暗くなるフィルタと開発用のみって文字を合成してるわけではないようです
ということは地図タイルを変えれば API キーなしでも Google Maps の API を使って地図ツールを作ることができます

地図タイルは OpenStreetMap などがありますが国内なら国土地理院地図がクオリティ高くて良いと思います

あとの問題は 毎回出る正常にロードできませんでしたって広告が邪魔なくらいです
これは単純に CSS を使ったり 閉じるボタン (.dismissButton) を自動でクリックさせれば非表示にできます

別地図を使うには map.mapTypes.set で地図の設定を追加します
追加した地図を使うには Map のインスタンス作成時のオプションで追加する地図の名前を指定しておけばおっけいです

サンプルコードは⇩です
クリックした場所にマーカーを設定するだけの特に意味のないものです

<!doctype html>

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map" style="width: calc(100vw - 16px); height: calc(100vh - 16px);"></div>

<script>
const gmap = new google.maps.Map(map, {
center: { lat: 35, lng: 135 },
zoom: 7,
mapTypeId: "gsi-map",
})

const gsi_map = new google.maps.ImageMapType({
getTileUrl(coord, zoom) {
return `https://cyberjapandata.gsi.go.jp/xyz/pale/${zoom}/${coord.x}/${coord.y}.png`
},
maxZoom: 18,
minZoom: 0,
})

gmap.mapTypes.set("gsi-map", gsi_map)

const div = document.createElement("div")
div.innerHTML = `
<div style="margin: 5px; padding: 5px; background: white; text-align: center; border-radius: 6px;">
<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">
<img src="https://www.gsi.go.jp/common/000051590.png" width="50"><br/>
<span style="font-size: 11px;">国土地理院地図</span>
</a>
</div>
`
gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(div)

google.maps.event.addListenerOnce(gmap, "idle", () => {
setTimeout(() => {
document.querySelector(".dismissButton").click()
}, 1000)
})

google.maps.event.addListener(gmap, "click", eve => {
const marker = new google.maps.Marker({
map: gmap,
position: eve.latLng,
})
google.maps.event.addListener(marker, "click", () => {
marker.setMap(null)
})
})
</script>