routo Developers

마커 이미지 아이콘 사용

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

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

var marker = new routo.maps.Marker({
    position: map.getCenter(),
    icon: {
        url: 'https://tile.routo.com/webgis_tile01/Static/images/icon/Marker_Type_B.png',
    },
    map: map,
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>마커 이미지 아이콘 사용하기</title>
    
    <style>
    html,
    body {
        margin: 0;
        padding: 0px 15px 10px 15px;
        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>
    <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.507010, lng: 127.058665 }, // 지도 초기 위치
            zoom: 18, // 지도 로딩 시 최초 표시 레벨
        });

        var marker = new routo.maps.Marker({
            position: map.getCenter(),
            icon: {
                url: 'https://tile.routo.com/webgis_tile01/Static/images/icon/Marker_Type_B.png',
            },
            map: map,
        });
    </script>
</body>
</html>

WEB JS