google.maps.Marker
　⇒ google.maps.marker.AdvancedMarkerElement
に更新されたらしいが、超初心者にはチンプンカンプン。

そこで先生のページを参考に、一つのhtmlファイルで表示されるようにした。
先ずは第一歩か？

先生、ありがとうございます。↓
https://ivix-design.co.jp/blog/google-maps-api-marker/
https://digipress.info/tech/migrate-to-google-maps-api-advanced-marker-element/

<!--【参考】https://digipress.info/tech/migrate-to-google-maps-api-advanced-marker-element/-->
<!--【参考】https://ivix-design.co.jp/blog/google-maps-api-marker/-->

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Sample_GoogleMap</title>
    <style>    
        /*  */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;       
            /*  オリジナル↓
            width: 640px;
            height: 480px;            
            */
        }
        @media screen and (max-width: 1024px){
            #map {
                height: 100%;   /* ←追加 */
                width: 100%;
            }
        }
    </style>

    <!--非推奨/古い方法   
        <script src="http://maps.google.com/maps/api/js?key=【APIキーだよ！】&language=ja"></script>
    -->

    <!--現在の推奨方法(Dynamic Library Import) Dynamic Library Impor/google.maps.marker.AdvancedMarkerElement   -->
    <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: "【APIキーだよ！】",
          v: "weekly",
        });
    </script>

</head>
<body>
    <div id="map"></div>

    <script>
        let map;

        async function initMap() {
            // 座標
            let coordinate = { lat: 35.16933225736418, lng: 136.8946049833043 };

            // 地図の描画
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement } = await google.maps.importLibrary(
                "marker",
            );
            map = new Map(document.getElementById("map"), {
                center: coordinate,
                zoom: 8.8,
                mapId: "mapId", // 作成したマップID
            });
                
            // 座標位置にマーカーを付ける
            new AdvancedMarkerElement({
                map,
                position: coordinate,
                title: "○○株式会社",
            });

            // 60km圏内を円で囲む
            new google.maps.Circle({
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.35,
                map,
                center: coordinate,
                radius: 60000,
            });  
        }

        initMap();
    </script>

</body>
</html>