河内・水簾洞

google.maps.marker.AdvancedMarkerElement　（途中）

１．概要

２．サンプル

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>地図作成</title>
  <style>
    /* 修正点 1: 地図コンテナを正しく表示するため、htmlとbodyの高さを設定 */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map {
      /* height/widthをビューポート基準(vh/vw)にするとより確実に表示されます */
      height: 90vh; 
      width: 90vw;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  
  <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCEnjYhWMrvGnsgmk6Y9THGhN7vBWHVvdY&callback=initMap&libraries=places"></script>
  
  <script>
    let map;
    
    async function initMap() {
      // ライブラリのインポート
      const { Map } = await google.maps.importLibrary("maps");
      const { InfoWindow } = await google.maps.importLibrary("maps");
      const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
      
      // 地図の初期化
      map = new Map(document.getElementById("map"), {
        center: { lat: 47.150, lng: 3.550}, // 地図の中心
        zoom: 6,
        mapId: "historical-map-id", // ここにご自身のマップIDを貼り付けてください
      });
      
      // 各マーカーのデータ
      const markersData = [
        { position: { lat: 40.82, lng: 23.85 }, content: '<a href="https://ksrd.jp/santarou/34_JapanRemains/new_page_50.php?place=アンフィポリス" target="_blank">アンフィポリス</a>' },
        { position: { lat: 35.298056, lng: 25.163056 }, content: '<a href="https://ksrd.jp/santarou/34_JapanRemains/new_page_50.php?place=クノッソス" target="_blank">クノッソス</a>' },
        { position: { lat: 37.730833, lng: 22.756111 }, content: '<a href="https://ksrd.jp/santarou/34_JapanRemains/new_page_50.php?place=ミケーネ" target="_blank">ミケーネ</a>' },
      ];
      
      // マーカーと情報ウィンドウの設置
      markersData.forEach(data => {
        const pinElement = new PinElement({});
        
        const marker = new AdvancedMarkerElement({
          position: data.position,
          map: map,
          content: pinElement.element,
        });
        
        const infoWindow = new InfoWindow({
          content: data.content,
        });

        // 修正点 2: InfoWindow.openの引数をAdvanced Markerの仕様に合わせる
        infoWindow.open({ anchor: marker, map }); // 最初から情報ウィンドウを開
      });
    }
  </script> 
</body>
</html>