Google Maps API マーカーの使い方から実装例【JavaScript】

new google.maps.Marker({
      position: coordinate,
      map,
      title:"アイヴィクス株式会社"
});

<!-- 地図の描画のスタイル設定 -->
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  width: 640px;
  height: 480px;
}
@media screen and (max-width: 1024px){
  #map {
    width: 100%;
  }
}


  // Maps JavaScript API の読み込み
  (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)&amp;&amp;u().then(()=>d[l](f,...n))})({
    key: "apiKey",  // 登録したＡＰＩキーを指定
    v: "weekly",　// リリース チャンネルやバージョン番号を指定（推奨：weeklyは週ごとのチャンネルを指定）
  });


  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();