Googleマップの色とアイコンをオリジナルに変更して、Webサイトに埋め込み

<!-- 地図を描画するコンテナ。高さはCSSで指定します -->
<div id="map"></div>

<!--
  Google Maps JavaScript API の読み込みスクリプト
  - key: Google Cloud で発行した API キーを指定してください
  - v: 利用するバージョン。特に理由がなければ "weekly" のままで大丈夫です
  この読み込みで、JavaScript 側から google.maps.importLibrary(...) が使えるようになります
-->
<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",
    v: "weekly",
  });
</script>

/* マップ */
#map{
  width: 100vw;
  height: 70vh;
}

/* 吹き出しの共通スタイル */
.gm-marker {
  position: absolute;
  left: 0;
  top: 0;
  padding: 7px;
  opacity: 0.9;
  transform: translate(-50%, calc(-100% - 9px)); /* 下辺の中央（しっぽ先）を座標に合わせる */
}

/* しっぽ（三角形） */
.gm-marker::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 10px;
  height: 10px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}

/* カラー */
.gm-marker.is-origin,
.gm-marker.is-origin::after {
  background: #333;
}

/* ロゴ */
.gm-marker-ttl img{
  width: 5em;
  height: auto;
}

(async () => {
  /* =========================
    設定
    ========================= */
  const MAP_ID = "YOUR_MAP_ID"; // Cloud Console で作成した Map ID
  const ORIGIN = { lat: 36.69308924617705, lng: 137.19187501011473 }; // 座標
  const DEFAULT_ZOOM = 15; // PC画面の初期表示の拡大レベル
  const MOBILE_ZOOM = 14; // スマホ画面（幅<=767px）の初期表示の拡大レベル

  /* =========================
    ライブラリ読み込み（新方式）
    ========================= */
  const { Map, Polyline } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  /* =========================
    マップ生成
    - 初期表示の拡大レベルは matchMedia で初期判定
    - centerは中点
    ========================= */
	
  const map = new Map(document.getElementById("map"), {
    zoom: window.matchMedia("(max-width: 767px)").matches ? MOBILE_ZOOM : DEFAULT_ZOOM, // 地図の拡大レベル（数値が大きいほど拡大）
    center: {
      lat: 36.69308924617705,
      lng: 137.19187501011473
    }, // 地図の初期表示位置（中心座標）
    mapId: MAP_ID, // 使用するマップスタイルのID（Cloud Consoleで発行）
    zoomControl: true, // ズームボタンの表示（+ / -）
    cameraControl: false, // 新しいカメラコントロールUIの表示（ズーム＋上下左右移動）
    mapTypeControl: false, // 地図/航空写真などの切替UIの表示
    scaleControl: false, // 縮尺バーの表示（1kmスケールなど）
    streetViewControl: false, // ストリートビュー用アイコンの表示（人型）,
    clickableIcons: false // ランドマークや建物クリック時の吹き出しの表示
  });

  function createMarker(className) {
    const el = document.createElement("div");
    el.className = `gm-marker ${className}`;
    el.innerHTML = `
		<div class="gm-marker-ttl"><img src="images/common/cxg_logo.svg"></div>
    `;
    return el;
  }
  const markerOrigin = createMarker("is-origin");

  // 出発地点のカスタムマーカーを追加
  new AdvancedMarkerElement({
    map, // 表示する対象の地図オブジェクト
    position: ORIGIN, // マーカーを置く緯度経度
    content: markerOrigin, // 吹き出しHTML要素（カスタムマーカーの中身）
    collisionBehavior: google.maps.CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY
    // 重なり時の表示優先度：駅名ラベル等よりこのマーカーを優先表示
  });

})();