Web Design Leaves

// document.createElement() を使って HTML 要素（HTMLElement）を作成
const customContent = document.createElement('div');
// コンテンツに SVG を指定
customContent.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" fill="#c80101" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l3.103-3.104a.5.5 0 1 1 .708.708L4.5 12.207V14a.5.5 0 0 1-.146.354zM16 3.5a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182A24 24 0 0 1 5.8 12.323L8.31 9.81a1.5 1.5 0 0 0-2.122-2.122L3.657 10.22a9 9 0 0 1-1.039-1.57c-.798-1.576-.775-2.997-.213-4.093C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5z"/>
</svg>`;

// カスタムコンテンツ（SVG）を使って高度なマーカーを作成
const marker = new AdvancedMarkerElement({
  position: { lat: 35.658580, lng: 139.745454 },  // マーカーの位置
  map,                  // 表示先の地図（map: map の短縮形）
  title: '東京タワー',   // ツールチップとして表示されるタイトル
  content: customContent, // 上記で作成したカスタムコンテンツ要素を指定
});

async function initMap() {
  // maps ライブラリ（地図機能）を読み込み
  const { Map } = await google.maps.importLibrary("maps");

  // marker ライブラリ（カスタムマーカー機能）を読み込み
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  const position = { lat: 35.659012, lng: 139.745433 };

  // 地図を初期化
  const map = new Map(document.getElementById("map"), {
    center: position,
    zoom: 15,
    mapId: "DEMO_MAP_ID", // 実際の Map ID に置き換えてください
  });

  // PinElement を使ってカスタムピンのデザインを設定
  const pin = new PinElement({
    scale: 1.6,               // ピンのサイズ（1.0 が標準）
    background: '#35e352',   // ピンの背景色
    borderColor: '#094e15',  // ピンの枠線色
    glyphColor: '#094e15',   // グリフ（アイコンまたは文字）の色
  });

  // 高度なマーカーを作成し、ピンの要素を content に指定
  const marker = new AdvancedMarkerElement({
    position,
    map,
    content: pin.element, // カスタマイズしたピン（PinElement）を指定
  });
}

initMap();

const pin = new PinElement({
  scale: 1.6,               // ピンのサイズ（1.0 が標準）
  background: '#057a19',   // ピンの背景色
  borderColor: '#094e15',  // ピンの枠線色
  glyphColor: '#ffffff',   // グリフ（アイコンまたは文字）の色
  glyph: 'G' // グリフをテキスト文字に
});

// これは動作しません（文字列を直接指定している）
const pin = new google.maps.marker.PinElement({
  glyph: `<svg ...>...</svg>`, //指定した文字列が表示されてしまう
});

// document.createElement() を使って HTML 要素（HTMLElement）を作成
const svgDiv = document.createElement('div');

// innerHTML でコンテンツに SVG（Magic アイコン）を指定
svgDiv.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#3764ce" viewBox="0 0 16 16">
  <path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707zM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1zM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707zM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0z"/>
</svg>`;

// PinElement を作成
const pin = new google.maps.marker.PinElement({
  glyph: svgDiv, // 上記で作成した SVG をコンテンツに持つ div 要素を指定
  background: "white",     // ピンの背景色
  borderColor: "orange",    // 枠線色
});

// 高度なマーカーを作成し、ピンの要素を content に指定
const marker = new AdvancedMarkerElement({
  position,
  map,
  content: pin.element, // カスタマイズしたピン（PinElement）を指定
});

const infoWindow = new google.maps.InfoWindow({
  content: 'ここに表示する内容（テキストやHTML）'
});

infoWindow.open(map, marker);

// 非同期関数 initMap を定義（Google Maps JavaScript API のモジュールを読み込むため）
async function initMap() {
  // 地図と情報ウィンドウのライブラリを読み込み
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  // 高度なマーカー（AdvancedMarkerElement）とピン要素（PinElement）を読み込み
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  // 地図を初期化して表示
  const map = new Map(document.getElementById("map"), {
    center:  { lat: 35.659012, lng: 139.745433 },  // 地図の中心座標（東京タワー）
    zoom: 15,                                      // ズームレベル
    mapId: "DEMO_MAP_ID",                          // 使用するマップID（Google Cloud Consoleで発行）
  });

  // 複数のマーカーの情報を格納したオプション配列（高度なマーカーとピン要素の生成に使用）
  const options = [
    {
      position: { lat: 35.659012, lng: 139.745433 },
      title: "東京タワー",
      background: '#ed6bc4',
      borderColor: '#7a0d57',
      glyphColor: '#7a0d57',
    },
    {
      position: { lat: 35.657373, lng: 139.748265 },
      title: "増上寺",
      background: 'lightgreen',
      borderColor: 'darkgreen',
      glyphColor: 'darkgreen',
    },
    {
      position: { lat: 35.660069, lng: 139.736378 },
      title: "六本木ミュージアム",
      background: 'lightblue',
      borderColor: 'blue',
      glyphColor: 'blue',
    },
  ];

  // マーカー共通で使用する InfoWindow インスタンス（1つだけ生成して使い回す）
  const infoWindow = new InfoWindow();

  // オプション配列からマーカーを順に生成
  options.forEach(({ position, title, background, borderColor, glyphColor }, i) => {

    // カスタムピンを作成（色・番号付き）
    const pin = new PinElement({
      scale: 1.5,                       // サイズを拡大
      background,                      // 背景色
      borderColor,                     // 枠線の色
      glyphColor,                      // 中央の文字色
      glyph: `${i + 1}`,               // 1から始まる連番を表示
    });

    // AdvancedMarkerElement を使ってカスタムマーカーを作成
    const marker = new AdvancedMarkerElement({
      position,                        // マーカーの位置
      map,                             // 表示する地図
      title: `${i + 1}. ${title}`,     // タイトル（InfoWindow で表示）
      content: pin.element,            // ピン要素のDOMを使ってカスタム表示
      gmpClickable: true,              // クリック可能に設定
    });

    // マーカークリック時のイベントリスナーを登録
    marker.addListener('click', () => {
      infoWindow.close();                // すでに開いている InfoWindow を閉じる
      infoWindow.setContent(marker.title);  // タイトルを InfoWindow にセット
      infoWindow.open(marker.map, marker);  // 指定のマーカー位置に InfoWindow を開く
    });
  });
}

// 関数を実行して地図を初期化
initMap();

async function initMap() {
  // 地図と情報ウィンドウのライブラリを読み込み
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  // 高度なマーカー（AdvancedMarkerElement）とピン要素（PinElement）を読み込み
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  // 地図を初期化して表示
  const map = new Map(document.getElementById("map"), {
    center: { lat: 35.659012, lng: 139.745433 },  // 地図の中心座標（東京タワー）
    zoom: 15,                                      // ズームレベル
    mapId: "DEMO_MAP_ID",                          // 使用するマップID（Google Cloud Consoleで発行）
  });

  // 複数のマーカーの情報を格納したオプション配列（高度なマーカーとピン要素の生成に使用）
  const options = [
    {
      position: { lat: 35.659012, lng: 139.745433 },
      title: "東京タワー",
      background: '#ed6bc4',
      borderColor: '#7a0d57',
      glyphColor: '#7a0d57',
    },
    {
      position: { lat: 35.657373, lng: 139.748265 },
      title: "増上寺",
      background: 'lightgreen',
      borderColor: 'darkgreen',
      glyphColor: 'darkgreen',
    },
    {
      position: { lat: 35.660069, lng: 139.736378 },
      title: "六本木ミュージアム",
      background: 'lightblue',
      borderColor: 'blue',
      glyphColor: 'blue',
    },
  ];

  // オプション配列からマーカーを順に生成
  options.forEach(({ position, title, background, borderColor, glyphColor }, i) => {

    // カスタムピンを作成（色・番号付き）
    const pin = new PinElement({
      scale: 1.5,                       // サイズを拡大
      background,                      // 背景色
      borderColor,                     // 枠線の色
      glyphColor,                      // 中央の文字色
      glyph: `${i + 1}`,               // 1から始まる連番を表示
    });

    // AdvancedMarkerElement を使ってカスタムマーカーを作成
    const marker = new AdvancedMarkerElement({
      position,                        // マーカーの位置
      map,                             // 表示する地図
      title: `${i + 1}. ${title}`,     // タイトル（InfoWindow で表示）
      content: pin.element,            // ピン要素のDOMを使ってカスタム表示
      gmpClickable: true,              // クリック可能に設定
    });

    // InfoWindow インスタンスをそれぞれに作成
    const infoWindow = new InfoWindow();

    // InfoWindow の重なり順の制御（i が 0 の東京タワーのウィンドウを前面に）
    if (i === 0) {
      infoWindow.setZIndex(10);  //
    }

    // タイトルを InfoWindow にセット
    infoWindow.setContent(marker.title);
    // 指定のマーカー位置に InfoWindow を開く（初期状態で表示）
    infoWindow.open(marker.map, marker);

    // マーカークリック時のイベントリスナーを登録
    marker.addListener('click', () => {
      infoWindow.close();                // すでに開いている InfoWindow を閉じる
      infoWindow.setContent(marker.title);  // タイトルを InfoWindow にセット
      infoWindow.open(marker.map, marker);  // 指定のマーカー位置に InfoWindow を開く
    });
  });
}

// 関数を実行して地図を初期化
initMap();