routo Developers

마커 클릭 이벤트 활용

마커를 마우스로 클릭했을때 click 이벤트가 발생합니다.
이 예제는 마커를 클릭했을 때 마커 위에 인포윈도우를 표시합니다.

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

  var marker = new routo.maps.Marker({
    position: map.getCenter(),
    clickable: true,
    map: map,
  });

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

  marker.addEventListener("click", function (e) {
    infowindow.open({
      anchor: marker,
      map: map,
    });
  });
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>마커 클릭 이벤트 활용</title>
    
<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 400px;
  position: relative;
}</style>
    
<style>
.routo-infowindow {
  min-width: 208px !important;
}</style>
  </head>
  <body>
    <h2>마커 클릭 이벤트 활용</h2>
    <hr />
    <p>
      마커를 마우스로 클릭했을때 click 이벤트가 발생합니다. <br />
      이 예제는 마커를 클릭했을 때 마커 위에 인포윈도우를 표시합니다.
    </p>
    <div id="map" class="map"></div>
  </body>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://api.routo.com/v2/maps/map?key=12290cd4-7094-43e8-a936-8819196d0332&callback=initMap"></script>
  <script>
$(function () {
  var map = new routo.maps.Map("map", {
    center: { lat: 37.507009, lng: 127.0586339 }, // 지도 초기 위치
    zoom: 18, // 지도 로딩 시 최초 표시 레벨
  });

  var marker = new routo.maps.Marker({
    position: map.getCenter(),
    clickable: true,
    map: map,
  });

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

  marker.addEventListener("click", function (e) {
    infowindow.open({
      anchor: marker,
      map: map,
    });
  });
});</script>
</html>

WEB JS

마커 클릭 이벤트 활용