routo Developers

커스텀 Infowindow 생성

Infowindow 안에 컨텐츠 내용을 사용자가 커스텀 할 수 있습니다.

var map = new routo.maps.Map("map", {
  center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
  zoom: 18, // 지도 로딩 시 최초 표시 레벨
});

let content = ``;
content += `<div>`;
content += `  <div style="float:right;"><button><img src="https://tile.routo.com/webgis_tile01/Static/images/icon/icon_pop_delet.png"/></button></div>`;
content += `  <div>`;
content += `    <table class="table"><thead><tr><th>속성</th><th>설명</th></tr></thead><tbody><tr><td>jugi_name</td><td>현대 오토에버</td></tr><tr><td>coordinates</td><td>127.058, 7.507</td></tr></tbody></table>`;
content += `  </div>`;
content += `</div>`;

var infowindow = new routo.maps.InfoWindow({
    content: content,
    disableAutoPan: true,
    pixelOffset: new routo.maps.Size(0, -20),
});

infowindow.addListener('content_changed', function(e) {
  e.element.addEventListener('click', function() {
    infowindow.close();
  });
});

infowindow.open({
  position: map.getCenter(),
  map:map,
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>커스텀 Infowindow 생성하기</title>
    
  <style>
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  .map {
    width: 100%;
    height: 400px;
    position: relative;
  }
  
  .routo-infowindow {
    min-width: 208px !important;
  }

  .table {
    border-collapse: collapse;
    border-top: 3px solid #168;
  }  
  .table th {
    color: #168;
    background: #f0f6f9;
    text-align: center;
  }
  .table th, .table td {
    padding: 10px;
    border: 1px solid #ddd;
  }
  .table th:first-child, .table td:first-child {
    border-left: 0;
  }
  .table th:last-child, .table td:last-child {
    border-right: 0;
  }
  .table tr td:first-child{
    text-align: center;
  }
  .table caption{caption-side: bottom; display: none;}
  button {
    border: 0 none;
    background-color: transparent;
    cursor: pointer;
  }
  </style>
</head>
<body>
  <h2>커스텀 Infowindow 생성하기</h2>
  <hr />
  <p>
    Infowindow 안에 컨텐츠 내용을 사용자가 커스텀 할 수 있습니다.
  </p>
  <div id="map" class="map"></div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://api.routo.com/v2/maps/map?key={APIKEY}"></script>
  <script>
    var map = new routo.maps.Map("map", {
      center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
      zoom: 18, // 지도 로딩 시 최초 표시 레벨
    });

    let content = ``;
    content += `<div>`;
    content += `  <div style="float:right;"><button><img src="https://tile.routo.com/webgis_tile01/Static/images/icon/icon_pop_delet.png"/></button></div>`;
    content += `  <div>`;
    content += `    <table class="table"><thead><tr><th>속성</th><th>설명</th></tr></thead><tbody><tr><td>jugi_name</td><td>현대 오토에버</td></tr><tr><td>coordinates</td><td>127.058, 7.507</td></tr></tbody></table>`;
    content += `  </div>`;
    content += `</div>`;

    var infowindow = new routo.maps.InfoWindow({
      content: content,
      disableAutoPan: true,
      pixelOffset: new routo.maps.Size(0, -20),
    });

    infowindow.addListener('content_changed', function(e) {
      e.element.addEventListener('click', function() {
        infowindow.close();
      });
    });

    infowindow.open({
      position: map.getCenter(),
      map:map,
    })
  </script>
</body>
</html>

WEB JS