routo Developers

마커 이미지 아이콘 사용

마커에 사용되는 아이콘 이미지를 변경 할 수 있습니다. 아이콘 이미지는 URL 주소를 사용합니다.

$(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(),
    icon: {
      url: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
    },
    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>
  </head>
  <body>
    <h2>마커 이미지 아이콘 사용</h2>
    <hr />
    <p>
      마커에 사용되는 아이콘 이미지를 변경 할 수 있습니다. 아이콘 이미지는 URL 주소를 사용합니다.
    </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(),
    icon: {
      url: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
    },
    map: map,
  });
});</script>
</html>

WEB JS

마커 이미지 아이콘 사용